How to keep jQuery UI Accordion collapsed by default ?
Last Updated :
23 Jul, 2025
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.
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() {
// Setting jquery accordion active property to false
$("#demoAccordion").accordion({
collapsible: true,
active: false
});
});
</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:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing