I want to expand and collapse all accordion sections with one click. 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">.
<!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>
Edit: Tried xxxmatko's suggestion, it didn't solve it.
Second edit: I found useful help elsewhere, for anyone with the same problem I had some old code. Updating with this solved it:
$("#accordion, #accordion2, #accordion3, #accordion4").accordion( "option", "active", false )
