jQuery UI – Part 3 Tabs + Accordion

Posted by mdrisser on 2008/07/10 under JavaScript, UI, jQuery | 4 Comments to Read

Welcome back. In this installment of our jQuery UI Tutorials we’ll be taking a look at the jQuery UI Accordion, a close sibling of the jQuery UI Tabs widget we looked at last time, as well as some of the features shared by both.

Like Tabs, Accordion is pretty straight forward to use. And it supports the same features as tabs does, so I won’t go into what we covered last time, but I will delve into some of the other features of the Tabs and Accordion widgets, which I haven’t yet covered.

Let’s go ahead and set up our basic page once again (for more details see the Tabs post):

    
    
    
       
        
        
        
       
    
    

Paragraph 1
Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.

Paragraph 2
Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo. Nulla sapien lorem, tincidunt sit amet, lobortis laoreet, feugiat a, leo. Etiam id mauris in libero molestie dictum. Cras nisl diam, dapibus ut, sollicitudin sed, auctor nec, orci. Nam eleifend, dui in dapibus congue, mi diam luctus velit, eu imperdiet pede elit nec lorem. Proin laoreet, eros a dictum faucibus, nunc wisi rhoncus nunc, at rhoncus lectus tellus vitae urna. Curabitur a turpis at ligula lobortis cursus.

Paragraph 3
Donec convallis est id augue. Integer elit. Cras mi. Nulla ac tellus eget wisi facilisis egestas. Pellentesque ac lacus a quam pulvinar ornare. In congue fermentum risus. Pellentesque vitae ligula quis justo vehicula varius. Donec feugiat mi eu urna. Donec erat massa, posuere ac, adipiscing in, lobortis ac, nisl. Donec malesuada turpis sed arcu. Curabitur lacus. Donec eu elit.



    

Both Tabs and Accordion share a few interesting features, that we’ll go ahead and take a look at. The first two we’ll look at are closely related, namely programmatically activating and deactivating Tabs and and Accordions. First let’s see how we go about activating an Accordion.

By default the first Accordion (or Tab) is activated, as we have seen, but what if you want a different one activated? We’ll simply pass an option to our Accordion (or Tabs), activating a specific element by default (note, this can also be done in response to user input):

$(document).ready(function() {
    $('#accordionTest').accordion();
    $('#accordionTest').accordion('activate', 1);
});

Notice the 3rd line in the code above. What this does is activate the second element in the Accordion, the elements accessed in the manner are accessed as an array, so 0 is the first element, 1 is the second and so on.

As with all things jQuery, there is more than one way to access, and thereby activate, a specific element:

$('#accordionTest').accordion('activate', 'a:second');
// Add a class (activate) to one of the anchor tags and call that anchor
$('#accordionTest').accordion('activate', 'a.activate');

Did you notice what part of the Accordion we were calling? In order to activate an element of the Accordion, call the anchor tag associated with that element.

We can also enable and disable the entire Accordion:

// Disable the Accordion
$('#accordionTest').accordion('disable');

// Enable the disabled Accordion
$('#accordionTest').accordion('enable');

These same options are available for the Tabs as well and work the same way. Don’t forget to take a look at the docs and see what else you can do.

I hope you’ve enjoyed this deeper look into two very useful components of the jQuery UI. Stay tuned, we’ll be looking at more very soon.