jQuery UI Accordion and Tabs

The Accordion and Tabs are two of the most popular jQuery UI widgets. Both organise content into sections. Accordion shows one section at a time in a vertical stacked layout. Tabs show one section at a time in a horizontal tab layout.

Accordion Widget

An Accordion displays a list of collapsible panels. Clicking a panel header opens it and automatically closes the previously open one — like a folder drawer where only one drawer can be open at a time.

Required HTML Structure

<div id="accordion">
    <h3>Section 1</h3>
    <div>Content for section 1</div>

    <h3>Section 2</h3>
    <div>Content for section 2</div>

    <h3>Section 3</h3>
    <div>Content for section 3</div>
</div>

Activating Accordion

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

Diagram: Accordion Behaviour

  Closed state:
  [▶ Section 1]
  [▶ Section 2]
  [▶ Section 3]

  After clicking Section 2:
  [▶ Section 1]
  [▼ Section 2] ← open
    Content for section 2 shows here
  [▶ Section 3]

Accordion Options

$("#accordion").accordion({
    active:      1,          // open panel index on load (0 = first, false = all closed)
    collapsible: true,       // allow all panels to be closed
    heightStyle: "content",  // each panel is its content height (default: "auto" = tallest)
    animate:     300,        // animation speed in ms
    event:       "mouseover" // open on hover instead of click (default: "click")
});

Accordion Events

$("#accordion").accordion({
    activate: function(event, ui) {
        var openHeader = ui.newHeader.text();
        console.log("Opened: " + openHeader);
    },
    beforeActivate: function(event, ui) {
        // return false here to cancel the panel opening
    }
});

Controlling Accordion Programmatically

// Open panel at index 2 (third panel)
$("#accordion").accordion("option", "active", 2);

// Close all panels
$("#accordion").accordion("option", "active", false);

// Refresh after dynamic content changes
$("#accordion").accordion("refresh");

Tabs Widget

Tabs display content in panels that are revealed by clicking horizontal tab labels. Only one tab panel is visible at a time.

Required HTML Structure

<div id="tabs">
    <ul>
        <li><a href="#tab1">Overview</a></li>
        <li><a href="#tab2">Features</a></li>
        <li><a href="#tab3">Reviews</a></li>
    </ul>
    <div id="tab1">Overview content goes here.</div>
    <div id="tab2">Feature list goes here.</div>
    <div id="tab3">Customer reviews go here.</div>
</div>

Activating Tabs

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

Diagram: Tabs Layout

  [Overview] [Features] [Reviews]   ← tab bar
  ┌──────────────────────────────┐
  │  Overview content shows here │   ← active panel
  └──────────────────────────────┘

  User clicks "Features":
  [Overview] [Features] [Reviews]
  ┌──────────────────────────────┐
  │  Feature list shows here     │   ← panel swaps
  └──────────────────────────────┘

Tabs Options

$("#tabs").tabs({
    active:      1,       // open second tab on load
    collapsible: true,    // allow clicking active tab to close panel
    event:       "mouseover",  // open on hover
    hide:        { effect: "fadeOut", duration: 200 },
    show:        { effect: "fadeIn",  duration: 200 }
});

Tabs with AJAX Content

Point the tab href to a URL and jQuery UI loads the content via AJAX automatically.

<div id="tabs">
    <ul>
        <li><a href="local.html">Local</a></li>
        <li><a href="ajax-content.html">Remote</a></li>
    </ul>
</div>

$(document).ready(function() {
    $("#tabs").tabs();
    // "Remote" tab loads ajax-content.html automatically when clicked
});

Tabs Events

$("#tabs").tabs({
    activate: function(event, ui) {
        var tabLabel = ui.newTab.text();
        console.log("Active tab: " + tabLabel);
    }
});

Controlling Tabs Programmatically

// Switch to third tab (index 2)
$("#tabs").tabs("option", "active", 2);

// Disable a tab
$("#tabs").tabs("disable", 1);   // disable second tab

// Enable a tab
$("#tabs").tabs("enable", 1);

// Add a new tab dynamically
$("#tabs ul").append("<li><a href='#newPanel'>New Tab</a></li>");
$("#tabs").append("<div id='newPanel'>New content</div>");
$("#tabs").tabs("refresh");

Accordion vs Tabs

Quick Summary

• Accordion: pair each <h3> with a <div> inside a container, then call .accordion().
• Tabs: build a <ul> of links pointing to panel IDs, then call .tabs().
• Both support active, collapsible, animation, and programmatic control.
• Tabs support AJAX loading — just point tab hrefs to external URLs.
• Use accordion("refresh") or tabs("refresh") after adding content dynamically.