CODEWITHSUNDEEP
jqueryhtmlcssjquery-uijquery-ui-accordion
JacobTheDev
JacobTheDev

Reputation: 18530

Closing jQuery UI Accordions With CSS

Is there a way to force jQuery UI accordions closed with CSS until the page finishes loading? We're using it on a content management system, and each page takes a fare amount of time to load. The jQuery doesn't get triggured until the page is done loading, but which point, all the accordions are already expanded. They close once the page loads, but I feel like it's confusing to users to see a giant list of stuff come up and then disappear.

Upvotes: 0

Views: 433

Answers (5)

Ryan
Ryan

Reputation: 1395

You could try something like this:

In your CSS, apply styles to the selector you're using to invoke the accordion:

.accordionSelector > div { display:none; }

Then change the display back to block after jQuery has loaded:

$(".accordionSelector").accordion({...}).children("div").css("display","block");

Upvotes: 0

Ortiga
Ortiga

Reputation: 8814

You can set it like:

.accordion-body{
    display: none;
}

I guess that accordion will call $.show (or similar) somewhere, so you you will not need to worry displaying it again. Again, this is a guess, so in the case I'm wrong, you make it visible again using

$('.accordion-body').css('display', 'block');
$('#accordion').accordion();

But, if you are calling .accordion() on dom load, you can also try firing it earlier, using .load:

$('#accordion').load(function(){
    $(this).accordion();
});

Upvotes: 0

mguymon
mguymon

Reputation: 9015

Following the setup from the jQuery Accordion documentation, you can simply put <div style="display: none"> on the content div below the h3 headers. This will hide all the content in the accordion while the page loads.

Upvotes: 0

user762846
user762846

Reputation:

The options show how to initialize the accordion with all tabs closed. See: http://jqueryui.com/demos/accordion/#option-active This means the initialization code would be:

$( ".selector" ).accordion({ active: false, collapsible: true });

Upvotes: 0

Milimetric
Milimetric

Reputation: 13549

There's an option on the .accordion({ ... }) call itself:

.accordion({ active: false, collapsible: true });

The active: false option makes it closed on creation and the collapsible: true option makes it so you can re-close it once you open it.

Upvotes: 1

Related Questions