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.

2 days ago

Photoshop Pro Tip: Edit –> Keyboard Shortcuts: Delete Help shortcut.

5 days ago

Self-driving cars now legal in Nevada. http://t.co/KJhEZmhG That’s one small step for man, one giant leap for Skynet.

5 days ago

Self-driving cars now legal in Nevada. http://t.co/KJhEZmhG That’s one small step for man, one giant leap for Skynet.

9 days ago

All URLs are URIs, but all URIs are not URLs.

11 days ago

“And I will always love you” It’s weird when people die.

11 days ago

“I believe that what doesn’t kill us makes us bitter.” Chuck Lorre vanity card 1. http://t.co/G6HJ1fUa