How to Enable an accordion using jQuery UI ?

Last Updated : 03 Apr, 2023

In this article, we will see how to enable an accordion in JqueryUI. To enable an accordion in jQuery UI, we will be using enable() method. jQuery UI enable() Method is used to enable the accordion and return the accordion element completely to its initial state.

Syntax:

$( ".selector" ).accordion( "enable" )

Parameters: This method does not accept any parameters.

Return values: This method simply returns the button to its pre-initial state.

Approach: First, add the jQuery UI 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” rel=”stylesheet” type=”text/css” />

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
  
    <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"
        rel="stylesheet" type="text/css" /> 
 
    <script> 
        $(function () { 
            $( "#gfg" ).accordion();
            $( "#gfg" ).accordion( "enable" );
        }); 
    </script> 
    <style>
         #gfg{font-size: 17px;}
    </style>
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>jQueryUI | enable Accordion</b> 
    <br>
    <br>
    <div id="gfg">
        <h2>A</h2>
         <div>Geeks1
            <br>Geeks1
            <br>Geeks1
            <br>Geeks1
            <br>
        </div>
        <h2>B</h2>
        <div>Geeks2
            <br>Geeks2
            <br>Geeks2
            <br>Geeks2
        </div>
    </div>
</body> 
  
</html>