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

Wow! I don’t even remember anymore how I managed before this new awesome boilerstrap. http://t.co/bWzwqVf2

3 days ago

If you like coding and competing and want to see Stockholm at its best; Checkout Escape from /dev/null – DICE edition. http://t.co/0SapzZxz

5 days ago

Going where none has gone before and pushing the boundaries of what has been called done. Mine, @soe, @tussetor #SthlmStartupHack app ≈Done