Accordion

Accordion is a super simple and light weight accordion menu plugin for Jquery. Accordion’s sub 1kb footprint makes it both easy to use and fast to load. The demo explains it all.

How to use Accordion

  1. <ul>
  2.     <li>
  3.         <a href="#america">America</a>
  4.         <ul>
  5.             <li>
  6.                 <a href="#america-newyork">New York</a>
  7.                 <div>Information about New York</div>
  8.             </li>
  9.             <li>
  10.                 <a href="#america-sanfransisco">San Fransisco</a>
  11.                 <div>Information about San Fransisco</div>
  12.             </li>
  13.         </ul>
  14.     </li>
  15.     <li>
  16.         <a href="#antarctica">Antarctica</a>
  17.         <div>Information about Antarctica</div>
  18.     </li>
  19. </ul>

When you have created the necessary html code you need to include the javascript file with the plugin and call the accordion method. See the demo for a more detailed example.

  1. <script type="text/javascript">
  2.     $( selector ).accordion();
  3. </script>

How to link to a level inside the accordion

Notice the href-attributes on each a-element. If you in the html code example above create a link to #america-newyork and click it the accordion will open up ‘New York’ and all it’s parents.

How to open a panel on load

Set the li classname to “current” and it will be open when the page loads.

How to open a panel via Javascript

You can activate nodes via Javascript by using the “activate-node” trigger.

  1. <script type="text/javascript">
  2.    $('a[href=#antarctica]').trigger('activate-node');
  3. </script>
Change log
Version Changes
1.4 Fixed a bug regarding “current” class and added activate-node trigger.
1.3 Refactored code and fix a bug with images inside a tags
1.2.2 Added functionality to open a panel on load by specifying the li class to “current”.
1.2.1 Fixed an error that occurred when no hash was set.
1.2 It is now possible to link to a specific level using a hash
1.1 Fixed an issue causing the accordion to stop working if you applied the accordion method twice on the same element.

3 years ago

Read one article about glass; read this one about Corning, Corning’s Gorilla Glass, Apple and the future. http://t.co/xakeeQzU (via @VirUZI)

3 years ago

I just bought CHTEMELE; a boardgame about HTML5 for 2 – 5 players. http://t.co/kbpQLivu

3 years ago

A normal male ejaculation is equivalent of 16 terabyte of information. http://t.co/tkLndAwg

3 years ago

We are 18, we have no work, we don’t study, we are Anonymous. -We know. http://t.co/NHPa7gjR

3 years ago

We are 18, we have no work, we don’t study, we are Anonymous. -We know. http://t.co/NHPa7gjR

3 years ago

Anonymous plan to DDoS the Central Bank of Sweden’s website, in the middle of the Swedish night, to hurt our economy. Have fun, Goodnight :)

3 years ago

Book trailer for Instant: The story of Polaroid [the Apple of the 60s]. http://t.co/y4srSGmP