Minimal jQuery accordion

Posted by andu
Sun, 2008-03-23 21:09

Searching for a simple accordion who works with an older jQuery version I'm forced to use and who doesn't have kilobytes of dependencies I didn't come across anything which suited me.

So I wrote my own starting from this blog post.

Here's a simple accordion using jQuery. First, the markup:

  1. <ul id="accordion">
  2. <a class="accordion-link">Link 1</a>
  3. <div class="accordion-contents">Contents 1</div>
  4. </li>
  5. <a class="accordion-link">Link 2</a>
  6. <div class="accordion-contents">Contents 2</div>
  7. </li>
  8. <a class="accordion-link">Link 3</a>
  9. <div class="accordion-contents">Contents 3</div>
  10. </li>
  11. </ul>

Next, the Javascript code:

  1. $('ul#accordion div.accordion-contents').hide().parent().addClass('accordion-closed');
  2. $('ul#accordion a.accordion-link').click(function() {
  3. $('div.contents:visible', $(this).parent().parent()).slideUp('fast').parent().addClass('accordion-closed').removeClass('accordion-opened');
  4. $(this).next('div').slideToggle('fast').parent().addClass('accordion-opened').removeClass('accordion-closed');
  5. });

Trackback URL for this post:

http://voidberg.org/trackback/256

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Alexei (not verified) - Sun, 2008-03-23 21:21

Misto! Pune un var inaintea lui parent, totusi :)

andu - Sun, 2008-03-23 21:34

Corect, îmi scăpase. Însă nu mai e nevoie, am modificat codul niţel şi am scos folosirea variabilei respective.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.