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:
Mootools:
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 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
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.