CODEWITHSUNDEEP
javascriptjqueryaccordion
Priyanka Jain
Priyanka Jain

Reputation: 15

Collapse - accordion first element opened by default

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>

Upvotes: 0

Views: 1713

Answers (3)

arasif
arasif

Reputation: 336

this will do the tricks

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

Upvotes: 0

Marcos ruiz
Marcos ruiz

Reputation: 81

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>

Upvotes: 0

Padhiyar Gaurang
Padhiyar Gaurang

Reputation: 145

Please use this.

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

Upvotes: 2

Related Questions