JQUERY UI Accordion start collapsed

JqueryAccordionJquery Ui-Accordion

Jquery Problem Overview


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

Jquery Solutions


Solution 1 - Jquery

In your options specify:

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

See documentation for active.

Solution 2 - Jquery

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;
}

Solution 3 - Jquery

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
		
	});

Solution 4 - Jquery

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

Solution 5 - Jquery

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.

Solution 6 - Jquery

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.

Solution 7 - Jquery

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionH BellamyView Question on Stackoverflow
Solution 1 - JquerytopekView Answer on Stackoverflow
Solution 2 - Jquerynonono nononoView Answer on Stackoverflow
Solution 3 - JqueryLyndon John HaslamView Answer on Stackoverflow
Solution 4 - JqueryshagshagView Answer on Stackoverflow
Solution 5 - JquerySteveView Answer on Stackoverflow
Solution 6 - JqueryAshish PatelView Answer on Stackoverflow
Solution 7 - Jqueryuser6236374View Answer on Stackoverflow