All geek questions in one place

JQuery Accordion expand all div

Can I deploy all components when the page loads or when an event occurs? Thanks!!

+5
source share
11 answers

Just use it

$('#accordion .ui-accordion-content').show();
+13
source

Not if you are referencing an accordion as indicated in your tag. From jQuery.

NOTE. If you want to open several sections at once, do not use the accordion

http://docs.jquery.com/UI/API/1.8/Accordion

+4
source

I would recommend this Multi-open Accordion plugin.

 // this will make the second tab by default opened (index starts from 0) $('#multiAccordion').multiAccordion({active: 1 }); // [ OR ] // supports multiple tabs to be opened by default $('#multiAccordion').multiAccordion({active: [1, 2, 3] }); // show all tabs $('#multiAccordion').multiAccordion({active: 'all' }); // hide all tabs $('#multiAccordion').multiAccordion({active: 'none' }); // you can set the options as any jQuery UI plugin using option method $('#multiAccordion').multiAccordion('option', 'active', 'all');
+4
source

I like this implementation of the switch window:

http://jsfiddle.net/kevinPHPkevin/mZhTY/107/

 <div class="toggle-box"> <div class="toggle-title">Toggle 1</div> <div class="toggle-content"> <p>text1.</p> </div> <div class="toggle-title">Toggle 2</div> <div class="toggle-content"> <p>text2.</p> </div> <div class="toggle-title">Toggle 3</div> <div class="toggle-content"> <p>text3</p> </div> </div>

Found it

I can't get the jQuery accordion tab to change colors when used (like :: visited), can I?

+3
source

You can do this in the document.ready event that jQuery provides, for example:

CSS

 .myClassToBeHidden { display: none; }

JQuery

 $(function() { $(".myClassToBeHidden").slideDown(); });

If you mean running the accordion from the jQuery UI, then ... you shouldn't use the accordion, the extension isn’t all for this, and they advise against it, as it causes other problems.

0
source

Make it unobtrusive and hide only if the visitor has javascript that I would put

CSS

 #divToBeHidden { display: block; }

In <head> :

 $('#divToBeHidden').hide();

Bottom of <body> :

 $(function() { $("#divToBeHidden").show(); //Or whatever means you'd prefer of showing the content });
0
source

I know that I am answering a two-year question, but none of the workarounds or alternative accordion plug-ins worked for me, so I came up with a devastatingly simple workaround: just destroy the accordion by clicking on the "expand" all "button and reinitialize it when you click on the link “Collapse all.” Something like this:

 <script type="text/javascript"> function accordionInit() { $("#accordion").accordion(); } function accordionDestroy() { $("#accordion").accordion("destroy"); } $(function() { accordionInit(); }); </script>

Expand all and collapse all links will look like this:

 <a onClick="accordionDestroy()">Expand all</a> | <a onClick="accordionInit()">Collapse all</a>
0
source

Lol, a lot of answers here, but the easiest solution doesn't seem to be. The answer is yes and no. "You cannot use the" traditional "command, however you can use the" classes "and write JS yourself, which is SUPER SIMPLE !

Just create your own Accordion using the jQueryUI and some JS classes, and you're good to go. It is VERY easy and supports your jQueryUI ThemeRoller. If you want the "x-tra" options to be provided by the "official victoria accorrdion", you can control them all with CSS or JS. Not really that hard. Below is a link to a working example of the code that I will post. All I just did was copy their classes into my HTML layout verbatim. HTML is still laid out just like any other jQueryUI accordion, except that we use the classes manually instead of letting jQuery do this. Look below to understand what I mean.

Or, of course, you can get this ready-made xtra plugin, jquery-theme

jsFiddle

HTML

 <div id="StickyNotes"> <div class="container"> <div id="accordion" class="ui-accordion ui-widget ui-helper-reset"> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active"> <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span> Section 1 </h3> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active"> <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span> Section 2 </h3> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active"> <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span> Section 3 </h3> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active"> <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span> Section 4 </h3> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> </div> </div>

Javascript

 $(function() { $("#accordion > h3").on("click", function(e) { $(this).next().slideToggle(function(e) { if ($(this).is(":visible")) { $(this).addClass("ui-accordion-content-active") .prev().toggleClass("ui-corner-all ui-corner-top").addClass("ui-accordion-header-active ui-state-active") .children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s"); } else { $(this).removeClass("ui-accordion-content-active") .prev().toggleClass("ui-corner-all ui-corner-top").removeClass("ui-accordion-header-active ui-state-active") .children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s"); } }); }) .hover(function(e) { $(this).toggleClass("ui-state-hover"); }); })
0
source

It has been 9 years since this question was asked. But I found a solution below to open all the accordion divs by default. Here I used the slideDown () method to show the entire contents of a div.

 $(function () { $("#accordion").accordion({ header: "> div > h3", collapsible: true, heightStyle: "content" }); jQuery('#accordion h3.ui-accordion-header').next().slideDown(); });
0
source

I know this is too late, but I found a solution today. Just use

 function expandAll() { $('#accordion h3').removeClass('ui-state-default') .addClass('ui-state-active') .removeClass('ui-corner-all') .addClass('ui-corner-top') .attr('aria-expanded', 'true') .attr('aria-selected', 'true') .attr('tabIndex', 0) .find('span.ui-icon') .removeClass('ui-icon-triangle-1-e') .addClass('ui-icon-triangle-1-s') .closest('h3').next('div') .show();}

full article link

-1
source

The MultiAccordion jQuery UI plugin worked fine for me: https://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

After adding the link to the plugin after the link to jQuery UI you just need to make 2 simple changes:

$ ("# accordion_div"). multi Accordion ("option", "active", [0,1] );

-1
source

Source: https://habr.com/ru/post/1305728/

More articles:


All Articles