How to Enable an accordion using jQuery UI ?

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>

Output:

How to Enable an accordion using jQuery UI ?

T

taran910

Improve

Article Tags :

Similar Reads

How to make an accordion using jQuery easy UI ?

EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. In this article, we will learn how to design accordion using jQuery Eas

jQuery UI Accordion enable() Method

jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Accordion enable() method is used to enable the disabled widget. It does not accept any parameter. Syntax: $( ".selecto

How to design accordion using jQuery EasyUI Mobile ?

EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. Accordions are HTML contents that toggle between showing and hiding. Do

How to Create an Accordion using CSS ?

Accordions are popular UI components used to present collapsible content sections on websites, enhancing user experience by organizing information in a compact and accessible manner. While traditionally implemented with JavaScript, a CSS-only approach offers a lightweight and efficient alternative,

jQuery UI Accordion disable() Method

To disable an accordion in jQuery UI we will be using disable() method which is discussed below: jQuery UI disable() Method is used to completely disable the accordion. It returns the accordion element completely to its initial state. Syntax: $( ".selector" ).accordion( "disable" )Parameters: This m