Skip to content

Commit

Permalink
Flesh out README
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniel-Hug committed Jan 27, 2015
1 parent 5e1ae91 commit 661c8d2
Showing 1 changed file with 33 additions and 2 deletions.
35 changes: 33 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,38 @@
tabbed-panels
=============

A tabbed panel switcher JS script
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
<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>
```

## 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.

## Browser support
Requires `querySelectorAll`, `classList`, and `forEach`.
Requires `getElementsByClassName`, `classList`, `forEach`, and `filter`.

0 comments on commit 661c8d2

Please sign in to comment.