Tag Archives: accordion

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: http://jqueryui.com/accordion/

jQuery: How to Expand an Accordion for Printing CodeUnit 05 MAY 2010

The jQuery UI library brings with it a host of cool effects and elements to apply to your project, one of which is the pretty cool accordion effect that basically turns a whole lot of sequential divs into an “accordion” – allowing you to click on a header to expand the selected div while the reset of them contract to hide away.

I did however come across a little problem that needed solving the other day, namely that when printing an accordion page, only the currently open, in other words visible, accordion segment prints, leaving the rest of the closed segments hidden on the final printed page.

Obviously this isn’t particularly useful when you are printing something out and needs to be addressed – which it turns out to be a pretty simple thing to achieve after all.

So let’s look at the code to expand and print our accordion page then shall we?

	var answer = confirm ("Do you wish to print this page's contents?");
	if (answer) {

The function above is called when the user clicks on the print button or whatever other element you have associated with the print functionality. The first step is a simple modal dialog to ask whether or not the user really wishes to print the current page. If we get a positive answer, when then move to dealing with the accordion, in other words expanding it so that all the information elements are showing.

To do this is a simple matter of grabbing all content divs and forcing them to show. Yup, as simple as that. The second line attempts to make the page look a little neater by changing the currently open header to look the same as all the closed headers – just for consistency of look of course.

We then run the javascript print function which initiates the browser’s print functionality and after that action has been done and control is handed back to the browser tab, we go and close all the accordion segments to make the page all neat and tidy again.


So as you can see, it is a pretty simple matter of expanding all those neat little jQuery UI accordions of yours after all! :)