Collapse - accordion first element opened by default

Question

I am working with Collapse "Accordion". When my page loads the first collapse is open by default, please suggest the way to make it close by default!!

Any help is appreciated. Thanks for help!!

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"></link>
<link href="/resources/demos/style.css" rel="stylesheet"></link>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="accordion">
  <h3>
    Click Here for answer:)</h3>
  <div style color: "red;">
    <b>Answer: </b>206 Bones
  </div>
</div>


<script>
  $(function() {
    $("#accordion").accordion({
      collapsible: true
    });
  });
</script>

Possible duplicate of [jquery accordion collapsed by default on page load](https://stackoverflow.com/questions/6575610/jquery-accordion-collapsed-by-default-on-page-load) and [How do I keep jQuery UI Accordion collapsed by default?](https://stackoverflow.com/questions/4633971) — adiga, May 20 '19 at 09:08
Possible duplicate of [How do I keep jQuery UI Accordion collapsed by default?](https://stackoverflow.com/questions/4633971/how-do-i-keep-jquery-ui-accordion-collapsed-by-default) — Kaddath, May 20 '19 at 09:18

score 2 · Accepted Answer · answered May 20 '19 at 09:08

2

Please use this.

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

answered May 20 '19 at 09:08

Padhiyar Gaurang

145
8

score 0 · Answer 2 · edited May 20 '19 at 09:23

you have to use this property:

  active: false

Follows a work example:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />

</head>
<body>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"></link>
  <link href="/resources/demos/style.css" rel="stylesheet"></link>
<div id="accordion">
<h3>
Click Here for answer:)</h3>
<div style color:"red;">
<b>Answer: </b>206 Bones
  </div></div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion({
 collapsible: true,
       active: false
    });
  } );
  </script>
</body>
</html>

score 0 · Answer 3 · answered May 20 '19 at 09:23

0

this will do the tricks

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

answered May 20 '19 at 09:23

arasif

216
2
6

Collapse - accordion first element opened by default

3 Answers3