0

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>
adiga
  • 34,372
  • 9
  • 61
  • 83
  • 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

3 Answers3

2

Please use this.

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

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>
Ricardo Rocha
  • 14,612
  • 20
  • 74
  • 130
0

this will do the tricks

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

arasif
  • 216
  • 2
  • 6