How to Trigger a jQuery UI Accordion Click Action Tips, Tricks and Tutorials 30 AUG 2013

jqueryui logoThe Accordion jQuery UI widget is a great way to present lots of data in a limited space through the use of collapsible panels.

If your panels are fairly large, or perhaps you have a quite a few of them in the accordion, then sometimes it would be nice to use a row of central links or buttons to trigger the collapsible pattern, basically saving the user the effort of scrolling all the way down the page to get to the last panel.

In other words you want to programmatically click a panel heading in order for it to show.

Thankfully, jQuery UI’s accordion API makes it a pretty simple task – essentially you just need to set the ‘active’ option to the desired index of the zero-indexed list of panels. In other words, if you have three panels and you want to open up the second panel, then you’ll need to set the active option to 1.

In practice – First, the HTML:

<div style="text-align:center;padding:5px;"><span class="activelink link">Active</span> | <span class="internallink link">Internal</span> | <span class="closedlink link">Closed</span></div>
<div id="accordion">
<div>Bla bla bla 1</div>
<div>Bla bla bla 2 </div>
<div>Bla bla bla 3</div>

Now the JavaScript:

$(document).ready(function() {
                var myaccordion = $('#accordion').accordion();

                $('.activelink').click(function() {
                    $('#accordion').accordion("option", "active", 0);
                $('.internallink').click(function() {
                    $('#accordion').accordion("option", "active", 1);
                $('.closedlink').click(function() {
                    $('#accordion').accordion("option", "active", 2);


Related Link:

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.