A declarative tabbed panels JS module
- no dependencies
- no exports
Include panels.js and panels.css.
Wrap the tabs/buttons and their panels in a
.tabbed-panelswrapper, and add a class of "tab" to each tab and "panel" to each panel:
<div class="tabbed-panels"> <!-- Tabs --> <button class="tab">Tab 1</button> <button class="tab">Tab 2</button> <!-- Panels --> <div class="panel"> <h1>Panel 1</h1> </div> <div class="panel"> <h1>Panel 2</h1> </div> </div>
- To make panels closeable add a "closeable" class to the
- To make panels hover over other page content add a "hovering" class to the
.tabbed-panelswrapper. Combining the closeable and hovering classes will make the panels close when you click elsewhere on the page.
- To have a panel defaultly be open, add an "active" class to the panel, its tab, and its
You can use panels.css and/or your own custom CSS. Whenever a panel is open, the panel, its tab, and its
.tabbed-panels wrapper all have an "active" class.