How to keep jQuery UI Accordion collapsed by default ?

Last Updated : 29 Mar, 2022

In this article, we will learn how to keep jQuery UI Accordion collapsed, by default. This can be done by setting the 'active' property of jQuery Accordion as false.

Accordion: It is a way to display collapsible content panels for presenting information in a limited amount of space. By clicking on each panel, we can see the content in it, and using the toggling feature, it can collapse the content panel.

The Accordion active option indicates which index of the accordion menu is to be open when the page is accessed. By default, the value is 0, i.e. the first menu panel. When the active option is set to false, it will collapse all the panels.

Please refer to the jQueryUI Accordion active Option article for more detail.

Syntax:

$( "Selector" ).accordion();

Approach:

Firstly, add the jQuery and JQuery UI CDN to the script or download them to your local machine.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css"> <script src="http://code.jquery.com/jquery-2.1.3.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

Create a div in the body for the dialog box and keep id as demoAccordion.

In the demoAccordion div, add 3 div which are going to be panels of the Accordion.

Now, using the jQuery accordion() method, create the Accordion and keep the collapsible property as true.

$("#demoAccordion").accordion({ collapsible: true });

Example: This example describes the jQuery UI Accordion collapse, by specifying its value as true.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>jQuery UI Accordion</title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link rel="stylesheet" 
          href=
"https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.11.2/jquery-ui.js">
    </script>
    <script>
        $(document).ready(function() {
            $("#demoAccordion").accordion({
                collapsible: true
            });
        });
    </script>
</head>

<body>
    <div id="demoAccordion">
        <h2>
            <a href="#">Python</a>
        </h2>
        <div> 
            Python is a popular programming language. 
            Python can be used on a server to create 
            web applications.
        </div>
        <h2>
            <a href="#">Java</a>
        </h2>
        <div> 
            Java is a popular programming language. 
            Java is used to develop mobile apps, 
            web apps, desktop apps, games and much more. 
        </div>
        <h2>
            <a href="#"> C language </a>
        </h2>
        <div> 
            C is considered as a middle-level language
            because it supports the feature of both 
            low-level and high-level languages 
        </div>
    </div>
</body>

</html>

Output:

Now, we will see how to create the jQuery UI Accordion collapsed, by default. To create an accordion that is collapsed by default, we need to set the 'active' property of the jQuery Accordion as false.

Syntax:

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

Approach:

Create a div in the body, for the dialog box and keep id as demoAccordion.
In the demoAccordion div, add 3 div which are going to be panels of the Accordion.
Now, using the jQuery accordion() method, create the Accordion and keep the collapsible property as true.
Set the active property to false To make the accordion collapse, by default.

Example: This example describes the jQuery UI Accordion collapse, by setting the active property as false.