Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Enable an Accordion using jQuery UI ?
An Accordion is a collapsible UI component which is used to make the web pages more visually appealing. The Accordion has some sections and child sections which represent the collapsible sections. In this each element has a header which when clicked shows another section which has some more details about the header.
This also allows only one header to be open at a time.
Some Useful Methods used for enabling accordian
Destroy: This is used to destroy the accordion.
Disable: This is used to disable the accordion.
Enable: This is used to enable an accordion.
Some useful Events used in the following examples
Activate: This is triggered after an accordion has been activated. This function gets two parameters: UI and Event.
BeforeActivate: This triggers before an accordion is activated. This function also gets two parameters: UI and Event
Create: This gets triggered when an accordion has been created. This function also gets two parameters: UI and Event
Approach 1: Using the .accordion() method
In this method we will be using this method on the parent container element to create Accordion. jQuery UI provides a built−in Accordion widget which can be used to create Accordion components in jQuery.
Algorithm
Step 1: Create a basic HTML file which has containers and headers. Use <div> with an id to the container. Use header tags and <P> tags to create a header and write text about it.
Step 2: Add required jQuery imports in the head section of HTML document.
Step 3: Call the .accordion() method by selecting the on parent div element inside the <script> tag.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Accordion</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<h2>Tutorials Point Accordion</h2>
<div id="accordion">
<h3>Programming Languages</h3>
<div>
<p>C</p>
<p>Python</p>
<p>Frontend</p>
<p>C++</p>
</div>
<h3>Fruits</h3>
<div>
<p>Apple</p>
<p>Banana</p>
<p>Mango</p>
</div>
<h3>Vehicles</h3>
<div>
<p>Car</p>
<p>Bike</p>
<p>Truck</p>
</div>
</div>
</body>
</html>
Basic Accordion has been created using the .accordion() method and this automatically closes the content of the first header when later is clicked.
Approach 2 : Using ready() function
Another approach we can use is the .accordion() method with ready() function. ready() function in Javascript is used to execute a certain program when DOM has been completely rendered.
Some optional parameters has been passed inside the .accordion() method, they are:
Active: This optional parameter sets the active/open accordion to the given index number. Default is 0, which is the first index. You can also set this false to set the state of accordions to close.
Animate: This optional parameter sets the animation in opening/closing of the accordions, It gets Numbers/Booleans. Numbers define the duration in ms while Boolean value of false will disable all kinds of animations.
Algorithm
Step 1: Create HTML file, create header and text inside an element, import required jQuery UI scripts inside the <head> tag.
Step 2: Inside the script tag use the .accordion() method along with ready() function to enable accordion.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Accordion</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#accordion').accordion({
active: 1,
animate: 200
});
});
</script>
</head>
<body style="text-align: center;">
<h1>Tutorials Point Accordion</h1>
<h2>Javascript Web Development</h2>
<div id="accordion">
<h4>Frontend</h4>
<div>
<p>ReactJS</p>
<p>NextJS</p>
<p>Angular JS</p>
</div>
<h4>Backend</h4>
<div>
<p>Node.js </p>
<p>Express.js</p>
</div>
<h4>Mobile Development</h4>
<p>React Native</p>
</div>
</body>
</html>
Approach 3: Using data−accordion attribute
Another approach we can use to enable an accordion using jQuery UI is by using data−accordion attribute along with .ready() function and .accordion() method. In this example, heightStyle parameter has been passed which is used to set the height of accordion and each panel. This accepts string values such as “auto”, “fill” and “content”. Default is “auto”.
Algorithm
Step 1: Create a div element and give a suitable id name. Also use <header> tags to create the header section of accordion along with a data−accordion attribute whose default ‘active’ state is false.
Step 2: Now add the accordion() method inside the <script> tag along with ready() function.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Accordion</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#accordion').accordion({
header: "> h3",
heightStyle: "content",
});
});
</script>
</head>
<body style="text-align: center;">
<h1>Tutorials Point Accordion</h1>
<h2>Programming Languages</h2>
<div id="accordion" style="text-align: center;">
<h3 data-accordion="{'active': false}">OOPS</h3>
<div>
<p data-accordion="{'heightStyle': 'content'}">Java</p>
<p data-accordion="{'heightStyle': 'content'}">Python</p>
<p data-accordion="{'heightStyle': 'content'}">C++</p>
</div>
<h3 data-accordion="{'active': false}">Game Development</h3>
<div>
<p data-accordion="{'heightStyle': 'content'}">Java</p>
<p data-accordion="{'heightStyle': 'content'}">C#</p>
</div>
<h3 data-accordion="{'active': false}">Mobile Development</h3>
<div>
<p data-accordion="{'heightStyle': 'content'}">Objective C</p>
<p data-accordion="{'heightStyle': 'content'}">Kotlin</p>
<p data-accordion="{'heightStyle': 'content'}">React Native</p>
</div>
</div>
</body>
</html>
Conclusion
The use of .accordion() method with .ready() function in complex HTML files is advised because the accordion gets enabled when the page has been loaded properly. You can always use any of the methods above and use CSS styles and options,methods and events of accordion() to style and customize the accordions
198 Views
