Unwrongest

Hello, my name is Jan Jarfalk and I'm an interaction designer and interface developer. This, my lab, is where I learn and evolve.

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.

3 days ago

Twitter Bootstrap 2.0 is here. By nerds, for nerds. Cross everything. http://t.co/J4cFxGlb A neat looking front-end toolkit.

9 days ago

Looking for a solid way to do application versioning? Look no further. http://t.co/OMYJ2xzF Semantic Versioning guidelines are nifty!

15 days ago

On Amazon: Bad reviews are better for product sales than no reviews. (via @ronnestam )

15 days ago

There are only 180k Twitter users in Sweden, but ~75% of Sweden’s journalists use Twitter. (via @ronnestam )