How to Create an Accordion Menu Using jQuery UI

This article provides a step-by-step guide to building a collapsible accordion menu using jQuery UI. You will learn the required HTML structure, how to include the necessary jQuery and jQuery UI libraries, how to initialize the component with minimal JavaScript, and how to apply key configuration options to customize its behavior.

Step 1: Include jQuery and jQuery UI

To use jQuery UI's accordion widget, you must load both the core jQuery library and the jQuery UI library along with its default stylesheet. Include these directly in the <head> section of your HTML document via CDN:

<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- jQuery UI Library -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

Step 2: Set Up the HTML Markup

The jQuery UI accordion requires a container element with alternating headers and content panels. By default, the widget expects pairs of <h3> (or another header tag) and <div> elements wrapped inside a single container.

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Content for the first section goes here.</p>
  </div>

  <h3>Section 2</h3>
  <div>
    <p>Content for the second section goes here.</p>
  </div>

  <h3>Section 3</h3>
  <div>
    <p>Content for the third section goes here.</p>
  </div>
</div>

Step 3: Initialize the Accordion with JavaScript

Target the wrapper <div> using its ID or class and call the .accordion() method once the DOM is fully loaded.

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

Step 4: Customize the Accordion Options

jQuery UI provides several configuration settings to control the accordion's behavior:

  • collapsible: true: Allows all panels to be closed simultaneously (default requires at least one to be open).
  • active: false: Starts the accordion with all panels collapsed (requires collapsible: true).
  • heightStyle: "content": Adjusts each panel's height to match its content, rather than expanding all panels to match the tallest one.
  • animate: 200: Sets the transition speed in milliseconds.

Example with options applied:

$(document).ready(function () {
  $("#accordion").accordion({
    collapsible: true,
    active: false,
    heightStyle: "content",
    animate: 250
  });
});

Complete Working Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Accordion Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/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.13.2/jquery-ui.min.js"></script>
</head>
<body>

  <div id="accordion">
    <h3>Overview</h3>
    <div>
      <p>This is the overview panel.</p>
    </div>

    <h3>Features</h3>
    <div>
      <p>This panel lists the main features.</p>
    </div>

    <h3>Contact</h3>
    <div>
      <p>Find our contact details in this panel.</p>
    </div>
  </div>

  <script>
    $(document).ready(function () {
      $("#accordion").accordion({
        collapsible: true,
        heightStyle: "content"
      });
    });
  </script>

</body>
</html>