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
VersionChanges
1.4Fixed a bug regarding “current” class and added activate-node trigger.
1.3Refactored code and fix a bug with images inside a tags
1.2.2Added functionality to open a panel on load by specifying the li class to “current”.
1.2.1Fixed an error that occurred when no hash was set.
1.2It is now possible to link to a specific level using a hash
1.1Fixed an issue causing the accordion to stop working if you applied the accordion method twice on the same element.

680 days 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)

682 days ago

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

684 days ago

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

686 days ago

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

686 days ago

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

687 days 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 :)

687 days ago

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