Open In App

jQueryUI Accordion Collapsible Option

Improve
Improve
Like Article
Like
Save
Share
Report

Collapsible option allows the user to close a menu by clicking on it. By default, its value is false.

Values:

  • Boolean: If set to true the accordion will collapse and if set to false accordion will not collapse. 

Approach: First, add jQuery Mobile scripts needed for your project.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script> 
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script> 
<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” el=”stylesheet” type=”text/css”/>

Example 1:

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <script src=
    </script>
    <script src=
    </script>
    <link href=
          rel="stylesheet" type="text/css" />
 
    <script>
        $(function () {
            $( "#gfg" ).accordion(
                { collapsible : true }
            );
        });
    </script>
    <style>
         #gfg{font-size: 17px;}
    </style>
</head>
  
<body>
    <h1 style="color:green">
          GeeksforGeeks
      </h1>
    <b>jQueryUI | Collapsible Accordion</b>
    <br>
    <br>
    <div id="gfg">
        <h3>GFG</h3>
        <div>GeeksforGeeks</div>
        <h3>Geeks</h3>
        <div>GeeksforGeeks</div>
    </div>
</body>
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <script src=
    </script>
    <script src=
    </script>
    <link href=
          rel="stylesheet" type="text/css" />
          
    <script>
        $(function () {
            $( "#gfg" ).accordion(
                   { collapsible : false }
            );
        });
    </script>
    <style>
         #gfg{font-size: 17px;}
    </style>
</head>
  
<body>
    <h1 style="color:green">
          GeeksforGeeks
      </h1>
    <b>jQueryUI | Collapsible Accordion</b>
    <br>
    <br>
    <div id="gfg">
        <h3>GFG</h3>
        <div>GeeksforGeeks</div>
        <h3>Geeks</h3>
        <div>GeeksforGeeks</div>
    </div>
</body>
</html>


Output:



Last Updated : 04 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads