JQUERY UI Accordion start collapsed

Question

How can I make the jquery UI accordion start collapsed when the form loads. Is there any javascript code for this?

Drover

Answer 1

In your options specify:

{
  ...
  active: false,
  collapsible: true,
  ...
}

See documentation for active.

Warmongering

still working on JQuery 1.4.4 as of today, though Visual Studio 2010 throws a JScript error (no error in the UI) on IE 8 – Eyestalk

It still shows the accordion collapsing though, any way to speed that up at initial collapsing or prevent this? animate: false gets rid of the animation but for always, ideally only remove it for initial load. – Cycad

UPDATE: Please disregard, I had .accordion wrapped in $( function() { } ); , without that it works just fine and without animation at initial load, nice. – Cycad

Answer 2

I was trying to do the same thing. Using Jquery UI tabs. I wanted none to show with 5 tabs when you start.

using active: false showed the 5th tabs content. So I set tabs CSS to display:none; since it in-line changes display. Hope this helps someone!

<script>
$(function() {
    $( "#tabs" ).tabs({
        active: false,
        collapsible: true,
    });
});

And in the style

#tabs-1, #tabs-2, #tabs-3, #tabs-4, #tabs-5{ 
    display:none;
}

Ryals

Answer 3

I used this code, as i was using a Dreamweaver Widget, the code that Topek didnt work for me hope this helps,

jQuery("#jQueryUIAccordion").accordion({ 
        event: "click",
        active: false,
        collapsible: true,
        autoHeight: false

    });

Astraphobia

Answer 4

To complete the answer of topex, With Jquery UI 1.10.3 I had to set the 'collapsible' option before the 'active' one.

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

See the documentation

Cryptic

It still shows the accordion collapsing though, any way to speed that up at initial collapsing or prevent this? animate: false gets rid of the animation but for always, ideally only remove it for initial load. – Cycad

UPDATE: Please disregard, I had .accordion wrapped in $( function() { } ); , without that it works just fine and without animation at initial load, nice. – Cycad

Answer 5

If you're using the wysiwyg "Properties" and the coding confuses, try putting a number in the "Active" box one more than your list of Sections. I have 12 sections and put "13" in there and it worked for me.

Individually

Answer 6

If you are using default jquery accordion it always display first panel content, you can disable it by using active: false attribute.

jQuery(document).ready(function() {
    jQuery( "#accordion" ).accordion({
      collapsible: true,
      active: false,
    });
});

but it's default behavior is for all panels will be set to the height of the tallest panel. so, for that you have to add "heightStyle" attribute.

heightStyle: "content",

so, each panel will be only as tall as its content.

Assignor

It still shows the accordion collapsing though, any way to speed that up at initial collapsing or prevent this? animate: false gets rid of the animation but for always, ideally only remove it for initial load. – Cycad

UPDATE: Please disregard, I had .accordion wrapped in $( function() { } ); , without that it works just fine and without animation at initial load, nice. – Cycad

Answer 7

If you look at the beginning of the panel group in your code, look for this

<div id="collapseOne1" class="panel-collapse collapse in"> 

if you just remove the "in" it has the panel close when the page loads.

Misrule