Accordion - Expand/Collapse multiple sections

Accordion - Expand/Collapse multiple sections

I want to expand and collapse all accordion sections with one click or have 4 different links to close each of the accordion divs. Right now it works with <a class="accordion-expand-all" href="#" target="_self">Open/Close All</a> for <div id="accordion"> but I want it to work with <div id="accordion2"> through <div id="accordion4"> as well. All the accordions in the different tabs works fine but when I click the Open/Close All link it only opens and closes the accordion sections in <div id="accordion">.

  1. <!doctype html> <head> <title>Accordion</title> <meta charset="utf-8"> <link href="css/style.css" rel="stylesheet"> <link href="css/jquery-ui.css" rel="stylesheet"> </head> <body> <a class="accordion-expand-all" href="#" target="_self">Open/Close All</a> <div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> <li><a href="#tabs-3">Tab 3</a></li> <li><a href="#tabs-4">Tab 4</a></li> </ul> <div id="tabs-1"> <div id="accordion"> <h3>Accordion 1-1</h3><div> Lorem Ipsum</div> <h3>Accordion 1-2</h3><div> Lorem Ipsum</div> <h3>Accordion 1-3</h3><div> Lorem Ipsum</div> </div><!-- /div accordion --> </div><!-- /div tabs-1 --> <div id="tabs-2"> <div id="accordion2"> <h3>Accordion 2-1</h3><div> Lorem Ipsum</div> <h3>Accordion 2-2</h3><div> Lorem Ipsum</div> <h3>Accordoin 2-3</h3><div> Lorem Ipsum</div> </div><!-- /div accordion2 --> </div><!-- /div tabs-2 --> <div id="tabs-3"> <div id="accordion3"> <h3>Accordion 3-1</h3><div> Lorem Ipsum</div> <h3>Accordion 3-2</h3><div> Lorem Ipsum</div> <h3>Accordoin 3-3</h3><div> Lorem Ipsum</div> </div><!-- /div accordion3 --> </div><!-- /div tabs-3 --> <div id="tabs-4"> <div id="accordion4"> <h3>Accordion 4-1</h3><div> Lorem Ipsum</div> <h3>Accordion 4-2</h3><div> Lorem Ipsum</div> <h3>Accordoin 4-3</h3><div> Lorem Ipsum</div> </div><!-- /div accordion4 --> </div><!-- /div tabs-4 --> </div><!-- /div Tabs --> <script src="js/jquery-2.2.3.min.js"></script> <script src="js/jquery-ui.js"></script> <script> $("#accordion").accordion({ collapsible: true, heightStyle: "content", navigation: true, active: true }); $("#accordion2").accordion({ collapsible: true, heightStyle: "content", navigation: true, active: true }); $("#accordion3").accordion({ collapsible: true, heightStyle: "content", navigation: true, active: true }); $("#accordion4").accordion({ collapsible: true, heightStyle: "content", navigation: true, active: true }); $("#tabs").tabs(); $("#tooltip").tooltip(); $(".selector").tooltip({ open: function (event, ui) { ui.tooltip.css("max-width", "50px");} }); // Hover states on the static widgets $( "#dialog-link, #icons li" ).hover( function() { $( this ).addClass( "ui-state-hover" ); }, function() { $( this ).removeClass( "ui-state-hover" ); } ); // Getter for tooltip var position = $( ".selector" ).tooltip( "option", "position" ); // Setter for tooltip $( ".selector" ).tooltip( "option", "position", { my: "left top+15", at: "left top" } ); var headers = $('#accordion .accordion-header'); var contentAreas = $('#accordion .ui-accordion-content ').hide(); var expandLink = $('.accordion-expand-all'); // add the accordion functionality headers.click(function() { var panel = $(this).next(); var isOpen = panel.is(':visible'); // open or close as necessary panel[isOpen? 'slideUp': 'slideDown']() // trigger the correct custom event .trigger(isOpen? 'hide': 'show'); // stop the link from causing a pagescroll return false; }); // hook up the expand/collapse all expandLink.click(function(){ var isAllOpen = $(this).data('isAllOpen'); contentAreas[isAllOpen? 'hide': 'show']() .trigger(isAllOpen? 'hide': 'show'); }); // when panels open or close, check to see if they're all open contentAreas.on({ // whenever we open a panel, check to see if they're all open // if all open, swap the button to collapser show: function(){ var isAllOpen = !contentAreas.is(':hidden'); if(isAllOpen){ expandLink.text('Close all') .data('isAllOpen', true);} }, // whenever we close a panel, check to see if they're all open // if not all open, swap the button to expander hide: function(){ var isAllOpen = !contentAreas.is(':hidden'); if(!isAllOpen){ expandLink.text('Open all') .data('isAllOpen', false); } } }); </script> </body> </html>

Found this on Google, would this work and if so where do I put the code?
  1. function collapseAll() { alert("calling collapseAll"); $("#accordion1, #accordion2, #accordion3, #accordion4") .filter(":has(.ui-state-active)") .accordion("activate", -1); $(".ui-accordion-header").blur(); }