Accordion

Collapsible contents that provide a visually appealing and interactive way to organize and present information, making it easier for users to access and digest content without overwhelming them with too much information at once. Powered by https://accordion.js.org/

How It Works:

  • Default JS scripts are applied. If different behavior is desired, then an accordion can be activated programmatically defined later in this page.
  • Responsive behavior is achievable by using the breakpoints option. Multiple breakpoints are also possible.

Default Accordion

The default layout with default options enabled.

  • Accordion 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 4

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

HTML 


<ul class="hpu-accordion" data-hpu="accordion">
    <li>
        <div class="acc_head">
            <div class="acc_label">
                <h3 class="label">Accordion 1</h3>
            </div>
        </div>

        <div class="acc_content">
            ...
        </div>
    </li>

    <li>
        <div class="acc_head">
            <div class="acc_label">
                <h3 class="label">Accordion 2</h3>
            </div>
        </div>

        <div class="acc_content">
            ...
        </div>
    </li>

    <li>
        <div class="acc_head">
            <div class="acc_label">
                <h3 class="label">Accordion 3</h3>
            </div>
        </div>

        <div class="acc_content">
            ...
        </div>
    </li>

    <li>
        <div class="acc_head">
            <div class="acc_label">
                <h3 class="label">Accordion 4</h3>
            </div>
        </div>

        <div class="acc_content">
            ...
        </div>
    </li>
</ul>

Accordion Colors

Add color styling to accordion headers for visual distinction: .acc_head .acc-bg-{color} Please refer to HPUCSS Colors for usage guides.

  • Accordion 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 4

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

HTML 


<ul class="hpu-accordion" data-hpu="accordion">
    <li>
        <div class="acc_head acc-bg-1st">
            <h3 class="label">Accordion 1</h3>
        </div>

        <div class="acc_content">
            ...
        </div>
    </li>

    <li>
        <div class="acc_head acc-bg-2nd">
            <h3 class="label">Accordion 2</h3>
        </div>

        <div class="acc_content">
            ...
        </div>
    </li>

    <li>
        <div class="acc_head acc-bg-3rd">
            <h3 class="label">Accordion 3</h3>
        </div>

        <div class="acc_content">
            ...
        </div>
    </li>

    <li>
        <div class="acc_head acc-bg-4th">
            <h3 class="label">Accordion 4</h3>
        </div>

        <div class="acc_content">
            ...
        </div>
    </li>
</ul>

Adding colors inside the accordion is also possible. To achieve this, use the color classes alognside the accordion contents: .acc_content .hpu-bg-{color}. Please refer to HPUCSS Colors for usage guides.

  • Accordion 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 4

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

HTML 


<ul class="hpu-accordion" data-hpu="accordion">
    <li>
        <div class="acc_head">
            <h3 class="label">Accordion 1</h3>
        </div>

        <div class="acc_content hpu-bg-1st">
            ...
        </div>
    </li>

    <li>
        <div class="acc_head">
            <h3 class="label">Accordion 2</h3>
        </div>

        <div class="acc_content hpu-bg-2nd">
            ...
        </div>
    </li>

    <li>
        <div class="acc_head">
            <h3 class="label">Accordion 3</h3>
        </div>

        <div class="acc_content hpu-bg-3rd">
            ...
        </div>
    </li>

    <li>
        <div class="acc_head">
            <h3 class="label">Accordion 4</h3>
        </div>

        <div class="acc_content hpu-bg-4th">
            ...
        </div>
    </li>
</ul>

Programmatic Accordions

Accordions can be activated programmatically with options available to customize their behavior. When using this approach, simply add the id attribute to the <ul> parent element, then call that id into your script. Also, remove the data-hpu="accordion" attribute to remove the default Accordion options.

  • Accordion 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 4

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

HTML 


<ul id="accDemo" class="hpu-accordion">
    ...
</ul>

JS 


let accDemo = new HPU.Accordion('#accDemo');

// Manually toggle the defined accordion
accDemo.toggleAccordion();

Accordion Options

Accordion options are also available to change its behavior:

JS 


let accordion = new HPU.Accordion('#accId', {options});

Accordion options are as follows:

Options Type Description Value(s) Default
collapseOthers Boolean Collapses other rows automatically when another row is opened. When set to false, collapsible automatically sets to true. true,
false 		false
collapsible Boolean Allows a row to collapse itself when clicked again. true,
false 		true
slideSpeed Integer Sets the animation speed in milliseconds. Time value in milliseconds e.g. 200 (0.2 seconds) 200
activeRows Array, Boolean, Integer, String Sets which row(s) to open on page load. When set to false, all rows will be collapsed, and collapsible automatically sets to true. When set to true, the first row will be expanded. If all rows are needed to be expanded, set this to 'all'.

Array, e.g.
[2, 4],

Boolean, e.g.
true, false, true expands the first row only.

Integer for single row, e.g.
2

String for setting 'all' to expand all rows on page load.

false
onRowOpen Function Call back function when a row is opened. If activeRows is set, the callback function will trigger multiple times on page load depending on the total number of opened rows. JS Function -
beforeRowOpen Function Call back function before a row is opened. If activeRows is set, the callback function will trigger multiple times on page load depending on the total number of opened rows. JS Function -
breakpoints Integer, String, Object Literal A collection of responsive options for specific breakpoint. By default, the media query is set to max-width (desktop first). Please set your breakpoint values for mobile sizes, and your default value for desktop. Object Literal such as: breakpoints: {} -

Accordion Methods

When an accordion is opened programmatically to define options, the method defines what to do to the accordion.

JS 


let accordion = new HPU.Accordion('#accId', {options});
accordion.toggleAccordion();

Accordion method is as follows:

Methods Description
toggleAccordion Manually expands and collapses the accordion

Multiple Rows Opened on Page Load

Set the option activeRows as an array and define the row number(s) to open on page load.

  • Accordion 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 4

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

HTML 


<ul id="accordion4" class="hpu-accordion">
    ...
</ul>

JS 


let accordion4 = new HPU.Accordion('#accordion4', {
    activeRows : [2, 3]
});

// Manually toggle the defined accordion
accordion4.toggleAccordion();

Collapse Other Rows

In this example, rows will automatically collapse after opening another row.

  • Accordion 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 4

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

HTML 


<ul id="accordion5" class="hpu-accordion">
    ...
</ul>

JS 


let accordion5 = new HPU.Accordion('#accordion5', {
    collapseOthers : true
});

// Manually toggle the defined accordion
accordion5.toggleAccordion();

Accordion with Callback Function

onRowOpen callback is defined in this section to show added behavior when a row is opened.

  • Accordion 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

HTML 


<ul id="accordion6" class="hpu-accordion">
    ...
</ul>

JS 


function fnForAcc6() {
    alert('This function runs after the accordion open!');
}

let accordion6 = new HPU.Accordion('#accordion6', {
    onRowOpen : fnForAcc6
});

// Manually toggle the defined accordion
accordion6.toggleAccordion();

Nested Accordion

Accordion(s) inside another accordion(s). The sub-accordion is using the beforeRowOpen option to call a function before a row is opened.

  • Nested Accordion

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

    • Sub-Accordion 1

      Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

    • Sub-Accordion 2

      Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

HTML 


<ul class="hpu-accordion" data-hpu="accordion">
    <li>
        ...

        <ul id="accordion7a" class="hpu-accordion">
            ...
        </ul>
    </li>
</ul>

JS 


function fnForAcc7a() {
    alert('This function runs before the accordion opens!');
}

let accordion7a = new HPU.Accordion('#accordion7a', {
    beforeRowOpen : fnForAcc7a
});

// Manually toggle the defined accordion
accordion7a.toggleAccordion();

Responsive Options

Changing the Accordion behavior according to the device width is also possible with breakpoints option.

In the example below, rows 2 and 4 are expanded on desktop. However, on devices with a width of less than 768px, all rows are collapsed, and the collapseOthers option is enabled.

NOTE : Page refresh is required when testing to see the difference in desktop and mobile mode.

  • Accordion 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

  • Accordion 4

    Lorem ipsum dolor sit amet consectetur adipisicing elit. A possimus neque, magni ut explicabo unde doloribus, eos eveniet voluptate facere, culpa ratione quas! Corporis neque mollitia totam iusto optio, magni cum earum, qui laborum corrupti vero, incidunt fugiat? Ipsa perspiciatis officia libero nulla velit tempore qui inventore itaque dolorem ex!

HTML 


<ul id="accordion8" class="hpu-accordion">
    ...
</ul>

JS 


let accordion8 = new HPU.Accordion('#accordion8', {
    activeRows : [2, 4],
    breakpoints : {
        768 : {
            activeRows : false,
            collapseOthers : true
        }
    }
});

// Manually toggle the defined accordion
accordion8.toggleAccordion();