jquery - jQueryUI Accordion - Expand/Collapse multiple sections -
i want expand , collapse accordion sections 1 click. right works <a class="accordion-expand-all" href="#" target="_self">open/close all</a> <div id="accordion"> want work <div id="accordion2"> through <div id="accordion4"> well. accordions in different tabs works fine when click open/close link opens , closes 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 static widgets $( "#dialog-link, #icons li" ).hover( function() { $( ).addclass( "ui-state-hover" ); }, function() { $( ).removeclass( "ui-state-hover" ); } ); // getter tooltip var position = $( ".selector" ).tooltip( "option", "position" ); // setter 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 accordion functionality headers.click(function() { var panel = $(this).next(); var isopen = panel.is(':visible'); // open or close necessary panel[isopen? 'slideup': 'slidedown']() // trigger correct custom event .trigger(isopen? 'hide': 'show'); // stop link causing pagescroll return false; }); // hook expand/collapse expandlink.click(function(){ var isallopen = $(this).data('isallopen'); contentareas[isallopen? 'hide': 'show']() .trigger(isallopen? 'hide': 'show'); }); // when panels open or close, check see if they're open contentareas.on({ // whenever open panel, check see if they're open // if open, swap button collapser show: function(){ var isallopen = !contentareas.is(':hidden'); if(isallopen){ expandlink.text('close all') .data('isallopen', true);} }, // whenever close panel, check see if they're open // if not open, swap button 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, didn't solve it.
second edit: found useful elsewhere, same problem had old code. updating solved it:
$("#accordion, #accordion2, #accordion3, #accordion4").accordion( "option", "active", false )
Comments
Post a Comment