New jQuery UI – Building a Better Accordion

I’ve been a fan of MooTools over jQuery for a while, but jQuery just came out with something that makes it a bit more competitive – a set of widgets.

If you head over to http://ui.jquery.com/ you can see the new demos online.

Here’s a little comparison of the two for you to look at.

The Accordion

jQuery:

jQuery Accordion demo.

Mootools:
Mootools accordion demo.

Codewise they are similar in scope. Both use containing <div>s to manage the accordion feature. Now the demo on the jQuery page uses more <div>s than I would like, but there is another page of demos that shows it’s not actually necessary to suffer from a massive case of <div>’itis in order to make it work. In fact, one of the examples uses HTML that is pretty spartan and that’s great. The Mootools accordion uses less <div>s in their demo, but is a bit heavier on the classes.

However, jQuery tops Mootools on one small (but major) issue in the demos. I’ve always disliked the fact that the Mootools accordion demo shows how to set the default content tab of the accordion by putting the text in the Javascript that will show on load. That’s a HUGE accessibility issue, and isn’t very practical unless there is non-essential content in the first tab to load (but then why would it be your first tab?). jQuery doesn’t do that.

The Javascript call for the accordion is:
jQuery('#myaccordion').Accordion();

<div class="basic" id="myaccordion">
<h3>Tab 1</h3>
<div>
<p>The content to show.</p>
<p>The content to show.</p>
</div>
<h3>Tab 2</h3>
<div>
<p>The content to show.</p>
<p>The content to show.</p>
</div>
<h3>Tab 3</h3>
<div>
<p>The content to show.</p>
<p>The content to show.</p>
</div>
</div> <!-- end the accordion wrapper -->

And it ends up looking similar to this:

jQuery Accordion Minimal.

jQuery has separated the control of which section shows first by putting a function and parameter set in that handle it separate from the content. You can see those here.

The only catch is that you can’t do this out of the box with jQuery. The function is dependent on the Dimensions library addon, which you can get here.

In the end, I think jQuery just built a better accordion.

~Nicole

2 Replies to “New jQuery UI – Building a Better Accordion”

  1. But you know that the MooTools demo just shows how to add a section after creating an accordion. Thats for example needed when u have a backend and u want to use an accordion like a tabbed UI. Its only an additional feature, not an accessibility issue.

    You also don’t need classes to get the correct div’s. You also use other selectors like $$(‘#demo > h3’), $$(‘#demo > div’). But in an accordion togglers have unique classes in most cases since they have a special layout and style.

    MooTools Accordion has simply a bit more features and u seem to need a very basic Accordion. 🙂

  2. Thanks for the info! I didn’t know there were different ways to handle the Mootools accordion. The Mootools online demo shows the method of setting the active accordion by adding in a new section of text from the Javascript.

    For accessibility sake, I never want my content in Javascript in any way and looking at it again I’m not entirely sure I understand how you can toggle open a tab on load (like a default open one) using the Mootools method. Do you have a link to a way to do that? Or can you explain?

    Hey now, I don’t want ‘boring’ … I’m a techie. I love stuff that looks cool and does fun things. The problem I have is with the HTML in some of these online demos, I don’t like using extra divs and classes when they aren’t necessary. I want something that has barebones HTML (or nearly) but looks just as cool as something wrapped in a ton of spans or divs and full of classes.

    But now you have me curious! I’m going to have to go play around with Mootools more and see if I can make it do magic without that text in the JS.

    ~Nicole

Leave a Reply