CODEWITHSUNDEEP
jquery
B.Hall
B.Hall

Reputation: 15

Close all accordian tabs by default

I'm a beginner when it comes to Jquery so hopefully could get some help on here :)! I've had a look through forums and have tried a few codes with no luck!

I have multiple accordians throughout my site and would like to have all of them closed as default when entering a page and clicking on tabs. Here: http://adventurethon.savvylittlefreelancer.com/event/clarence-valley-nsw/ you can see accordians nested within tabs which I would like to make closed by default.

I would also like to keep the function of automatically closing the accordian when another is opened.

Because I am still learning, I am still trying to get used to how to pinpoint the accordian by class and write the function.

Would i use the following outline:

$(function () {
    $("#accordion").accordion({
        heightStyle: "content",
        collapsible: true,
        active: 'none'
    });
});

To pinpoint the accordians, it looks like they have different classes (default by the theme) of the following throughout all tabs:

clearfix edgtf-title-holder ui-accordion-header ui-state-default ui-corner-all

clearfix edgtf-title-holder ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top

How could I put this all together appropriately?

Thanks kindly :)

Upvotes: 0

Views: 154

Answers (2)

Sumesh TG
Sumesh TG

Reputation: 2575

 $( function() {
    $( "#accordion" ).accordion({
        heightStyle: "content",
        collapsible: true,
        active: false
    });
  } );
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <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>
 
  </script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>
 
 
</body>
</html>

As per the documentation none is not a valid property

active

Type: Boolean or Integer

Default: 0

Boolean: Setting active to false will collapse all panels.

This requires the collapsible option to be true.

Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

Refer : http://api.jqueryui.com/accordion/#option-active

I hope this will help you.

Upvotes: 1

front_end_dev
front_end_dev

Reputation: 2056

active property should be boolean true|false

try this

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

Upvotes: 0

Related Questions