UIKit CSS Tutorial
Introduction →

Accordion Component

Accordion: A vertically stacked set of interactive headings that each reveal a section of content.

Live Examples

1. Basic Accordion

Example Preview
  • What is UIKit?

    UIKit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. It provides a comprehensive collection of HTML, CSS, and JS components.

  • Is UIKit free to use?

    Yes, UIKit is completely free and open source. You can use it for personal and commercial projects without any restrictions.

  • How do I install UIKit?

    You can install UIKit via CDN, NPM, Yarn, or download it directly from GitHub. Check the installation guide for detailed instructions.

Code:
<ul uk-accordion>
  <li class="uk-open">
    <a class="uk-accordion-title" href="#">What is UIKit?</a>
    <div class="uk-accordion-content">
      <p>UIKit is a lightweight and modular front-end framework...</p>
    </div>
  </li>
  <li>
    <a class="uk-accordion-title" href="#">Is UIKit free to use?</a>
    <div class="uk-accordion-content">
      <p>Yes, UIKit is completely free and open source...</p>
    </div>
  </li>
  <li>
    <a class="uk-accordion-title" href="#">How do I install UIKit?</a>
    <div class="uk-accordion-content">
      <p>You can install UIKit via CDN, NPM, Yarn...</p>
    </div>
  </li>
</ul>

2. Multiple Open Accordion

Example Preview
  • Section 1

    This accordion allows multiple sections to be open simultaneously.

    • Feature 1
    • Feature 2
    • Feature 3
  • Section 2

    You can open this section while keeping others open too.

    Multiple items can be expanded at the same time!

  • Section 3

    This is another section that can be opened alongside others.

Code:
<ul uk-accordion="multiple: true">
  <li>
    <a class="uk-accordion-title" href="#">Section 1</a>
    <div class="uk-accordion-content">
      <p>This accordion allows multiple sections...</p>
    </div>
  </li>
  <li>
    <a class="uk-accordion-title" href="#">Section 2</a>
    <div class="uk-accordion-content">
      <p>You can open this section while keeping...</p>
    </div>
  </li>
</ul>

3. Accordion with Icons

Example Preview
  • Documents

    All your important documents are stored here.

  • Images

    Your image gallery with thumbnails.

    📷
    🖼️
    🎨
    📸
  • Settings

    Configure your preferences and options.


Code:
<ul uk-accordion>
  <li>
    <a class="uk-accordion-title" href="#">
      <span class="uk-margin-small-right" uk-icon="icon: folder"></span>
      Documents
    </a>
    <div class="uk-accordion-content">
      <p>All your important documents...</p>
      <button class="uk-button uk-button-primary">View</button>
    </div>
  </li>
  <li>
    <a class="uk-accordion-title" href="#">
      <span class="uk-margin-small-right" uk-icon="icon: image"></span>
      Images
    </a>
    <div class="uk-accordion-content">
      <p>Your image gallery...</p>
    </div>
  </li>
</ul>

4. Nested Accordion

Example Preview
Code:
<ul uk-accordion>
  <li class="uk-open">
    <a class="uk-accordion-title" href="#">Web Development</a>
    <div class="uk-accordion-content">
      <ul uk-accordion>
        <li>
          <a class="uk-accordion-title" href="#">Frontend</a>
          <div class="uk-accordion-content">
            <ul>
              <li>HTML/CSS</li>
              <li>JavaScript</li>
            </ul>
          </div>
        </li>
        <li>
          <a class="uk-accordion-title" href="#">Backend</a>
          <div class="uk-accordion-content">
            <ul>
              <li>Node.js</li>
              <li>Python</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

JavaScript Methods

Methods:
// Get accordion instance
const accordion = UIkit.accordion(element);

// Toggle an item
accordion.toggle(index, animate);

// Open an item
accordion.toggle(index, true);

// Close an item
accordion.toggle(index, false);
Example Usage:
// HTML
<ul id="myAccordion" uk-accordion>
  <li>...</li>
</ul>

<button onclick="openFirst()">Open First</button>

// JavaScript
function openFirst() {
  const accordion = UIkit.accordion('#myAccordion');
  accordion.toggle(0, true);
}

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UIKit Accordion Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
</head>
<body>
    <div class="uk-container uk-margin-top">
        <h2>Frequently Asked Questions</h2>
        
        <ul uk-accordion="multiple: true; collapsible: false">
            <li class="uk-open">
                <a class="uk-accordion-title" href="#">
                    <span uk-icon="icon: question"></span>
                    What browsers does UIKit support?
                </a>
                <div class="uk-accordion-content">
                    <p>UIKit supports all modern browsers including Chrome, Firefox, Safari, and Edge.</p>
                </div>
            </li>
            <li>
                <a class="uk-accordion-title" href="#">
                    <span uk-icon="icon: question"></span>
                    Can I customize the theme?
                </a>
                <div class="uk-accordion-content">
                    <p>Yes, UIKit is highly customizable using Sass variables.</p>
                </div>
            </li>
            <li>
                <a class="uk-accordion-title" href="#">
                    <span uk-icon="icon: question"></span>
                    Is it mobile responsive?
                </a>
                <div class="uk-accordion-content">
                    <p>Absolutely! UIKit follows a mobile-first approach.</p>
                </div>
            </li>
        </ul>
    </div>

    <!-- UIKit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
    
    <script>
        // JavaScript to programmatically control accordion
        document.addEventListener('DOMContentLoaded', function() {
            const accordion = UIkit.accordion('ul[uk-accordion]');
            
            // Open all items after 3 seconds
            setTimeout(() => {
                accordion.toggle(0, true);
                accordion.toggle(1, true);
                accordion.toggle(2, true);
            }, 3000);
        });
    </script>
</body>
</html>

Options & Attributes

OptionTypeDefaultDescription
activeNumberfalseIndex of active element
animationBooleantrueEnable opening/closing animation
collapsibleBooleantrueAllow all items to be closed
contentString.uk-accordion-contentCSS selector for content
durationNumber200Animation duration in ms
multipleBooleanfalseAllow multiple open items
targetsString> *CSS selector for items
toggleString.uk-accordion-titleCSS selector for toggle
transitionStringeaseAnimation easing function
Best Practices:
  • Use clear and descriptive titles for each accordion item
  • Keep content concise and relevant to the title
  • Consider using icons to enhance visual hierarchy
  • Test keyboard navigation for accessibility
  • Use multiple: true when users need to compare content
  • Set collapsible: false when one item must always be open
Introduction →
Logo

HiFi Toolkit is a free online platform offering essential tools and converters for developers, designers, and everyday productivity tasks.

Follow Us

Our Tools
Our Company
Special Tools

© 2026 HiFi Toolkit. All rights reserved.

Terms & ConditionsPrivacy Policy