Jquery UI Accordion

jQuery UI Accordion is a user interface widget provided by the jQuery UI library that allows you to create collapsible and expandable content sections in a web page. It's particularly useful for organizing and presenting information in a space-efficient and user-friendly manner. Each section of the accordion can be collapsed or expanded individually, making it ideal for FAQs, menus, or content categories.

Including jQuery UI

First, you need to include the jQuery and jQuery UI libraries in your HTML file. You can do this by adding the following script tags to your HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Creating an Accordion

To create an accordion, you need to structure your HTML with specific elements. Each section you want to make collapsible should be enclosed in a div with a class of ui-accordion-content and an associated header with a class of ui-accordion-header.

<div id="accordion"> <h3 class="ui-accordion-header">Section 1</h3> <div class="ui-accordion-content"> <p>Content for section 1 goes here.</p> </div> <h3 class="ui-accordion-header">Section 2</h3> <div class="ui-accordion-content"> <p>Content for section 2 goes here.</p> </div> </div>

Initializing the Accordion

After defining the accordion structure, you need to initialize it using JavaScript/jQuery:

$(function() { $("#accordion").accordion(); });

This code initializes the accordion on the #accordion element.

Accordion Options

jQuery UI Accordion provides various options for customization. For example, you can configure the accordion to start with all sections collapsed or one section expanded:

$("#accordion").accordion({ collapsible: true, // Allows all sections to be collapsed active: 0 // Expand the first section by default (zero-based index) });

Events

You can also bind event handlers to respond to accordion interactions. Commonly used events include create, activate, and beforeActivate. For instance, you can trigger an action when a section is opened:

$("#accordion").accordion({ activate: function(event, ui) { console.log("Section opened: " + ui.newHeader.text()); } });

Styling

You can style the accordion and its sections using CSS. jQuery UI applies various classes to elements within the accordion, allowing you to style them according to your design.

Here's a complete example of a styled jQuery UI Accordion:

run this source code Browser View

Section 1

Content for section 1 goes here.

Section 2

Content for section 2 goes here.

Full Source : jQuery

<!DOCTYPE html> <html> <head> <title>jQuery UI Accordion</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> #accordion { width: 300px; } .ui-accordion-header { background-color: #333; color: #fff; cursor: pointer; } .ui-accordion-content { padding: 10px; } </style> </head> <body> <div id="accordion"> <h3 class="ui-accordion-header">Section 1</h3> <div class="ui-accordion-content"> <p>Content for section 1 goes here.</p> </div> <h3 class="ui-accordion-header">Section 2</h3> <div class="ui-accordion-content"> <p>Content for section 2 goes here.</p> </div> </div> <script> $(function() { $("#accordion").accordion({ collapsible: true, active: 0 }); }); </script> </body> </html>

Conclusion

jQuery UI Accordion simplifies the process of creating interactive and space-efficient content sections on your website, enhancing the user experience.






Related Topics
  1. jQuery UI Datepicker
  2. jQuery UI autocomplete
  3. Jquery UI Tabs
  4. Jquery UI Slider
  1. Jquery UI Dialog
  2. Jquery UI Draggable
  3. jQuery UI sortable
  4. Jquery UI Tooltip
  5. Jquery UI Menu