jQuery UI Accordion enable() Method

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:

jQuery UI Accordion enable() Method

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

jQuery UI Accordion animate Option

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Accordion animate option is used to add the animation effect to the accordion element. Its possible values are Boolean

How to make Basic accordion using jQuery Mobile ?

In this article, we will be making a basic accordion using jQuery Mobile. Approach: First, add the 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/jqu

How to enable a jQuery UI menu ?

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI menu is a Themeable menu that is used with mouse and keyboard interactions for navigating between pages. In this article, w

How to make a basic dialog using jQuery UI ?

In this article, we will be creating a Basic dialog using jQuery UI. Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js

How to keep jQuery UI Accordion collapsed by default ?

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 e