Is it possible to expand all components when page is load or when an event occurs? Thanks!!
Simply use this
$('#accordion .ui-accordion-content').show();
No, if you are referring to accordion as your tag states. From jQuery.
NOTE: If you want multiple sections open at once, don't use an accordion
I would recommend this plugin Multi-open Accordion
// 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');
I like this implementation of a toggle box:
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 this at
I can't make a jQuery UI accordion tab change colors when used (like a:visited), can I?
You can do it in the document.ready event jQuery provides, like this:
CSS:
.myClassToBeHidden { display: none; }
jQuery:
$(function() {
$(".myClassToBeHidden").slideDown();
});
If you mean with the accordion control from jQuery UI then...you shouldn't use accordion, expanding all isn't what it's for and they advise against this as it causes other issues.
To make it unobtrusive and be hidden only if the visitor has javascript I'd 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
});
I know I'm answering a 2-year-old question, but none of the workarounds or alternate accordion plugins worked for me, so I came up with a devastatingly simple workaround: just destroy the accordion on click of an "expand all" link, and re-initialize it on click of a "collapse all" link. Something like this:
<script type="text/javascript">
function accordionInit() {
$("#accordion").accordion();
}
function accordionDestroy() {
$("#accordion").accordion("destroy");
}
$(function() {
accordionInit();
});
</script>
The expand all and collapse all links would look like this:
<a onClick="accordionDestroy()">Expand all</a> | <a onClick="accordionInit()">Collapse all</a>
Lol, many answers on here, but the easiest solution doesn't seem to be. The answer is "yes" and "no". You can't use the "traditional" command, however you can use the "classes" and write the JS yourself, which is SUPER SIMPLE!
Just make your own Accordion using jQueryUI's classes and a little bit of JS and you're good to go. It's VERY easy and maintains with your jQueryUI ThemeRoller. If you want the "x-tra" options the "official accorrdion widget" provides, you can manage all of them with either a little more CSS or JS. Really Not that hard. Below is a link to the working example of the code I will post. All I simply did was copy their classes to my HTML layout verbatim. The HTML is still laid out just like any other jQueryUI accordion, except we apply the classes manually instead of letting jQuery do it. Look below to see what I mean.
Or of course you can get this xtra, jquery-theme ready plugin
The 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>
The 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"); });
})
It's been 9 years since this question was asked. But I found the below solution to open all the accordion divs by default. Here I used slideDown() method to show all the div contents.
$(function () {
$("#accordion").accordion({
header: "> div > h3",
collapsible: true,
heightStyle: "content"
});
jQuery('#accordion h3.ui-accordion-header').next().slideDown();
});
I know that is realy too late but i found the solution today. Just simply 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();}
MultiAccordion jQuery UI plugin worked great for me: https://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/
After adding the plugin reference after your jQuery UI reference, you just need to make 2 simple changes:
$("#accordion_div").multiAccordion("option", "active", [0,1]);
来源：https://stackoverflow.com/questions/2558553/jquery-accordion-expand-all-div