https://github.com/Daniel-Hug/tabbed-panels

A declarative tabbed panels JS module
https://github.com/Daniel-Hug/tabbed-panels

Last synced: 3 months ago
JSON representation

A declarative tabbed panels JS module

• Host: GitHub
• URL: https://github.com/Daniel-Hug/tabbed-panels
• Owner: Daniel-Hug
• Created: 2013-08-05T21:43:39.000Z (over 11 years ago)
• Default Branch: gh-pages
• Last Pushed: 2017-04-01T05:23:48.000Z (over 7 years ago)
• Last Synced: 2024-07-18T17:52:53.737Z (4 months ago)
• Language: JavaScript
• Homepage: http://daniel-hug.github.io/tabbed-panels/
• Size: 32.2 KB
• Stars: 22
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
tabbed-panels: [Demo](http://daniel-hug.github.io/tabbed-panels/)

=============

A declarative tabbed panels JS module

 - lightweight

 - no dependencies

 - no exports

## Use

1. Include **panels.js** and **panels.css**.

2. Wrap the tabs/buttons and their panels in a `.tabbed-panels` wrapper, and add a class of "**tab**" to each tab and "**panel**" to each panel:

    ```html

    


        

        Tab 1

        Tab 2


        

        


            
Panel 1

        

        


            
Panel 2

        

    

    ```


## Options

 - To make panels closeable add a "**closeable**" class to the `.tabbed-panels` wrapper.

 - To make panels hover over other page content add a "**hovering**" class to the `.tabbed-panels` wrapper. 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 `.tabbed-panels` wrapper.

## Styling

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.

## Browser support

Requires `getElementsByClassName`, `classList`, `forEach`, and `filter`.