Accordion

Accordion is a list where each item can be expanded or collapsed. Accordion allows you to create easy navigation for pages with a lot of content.

To place an accordion, use the nested div elements:

<div data-block="accordion">
    <div data-block="item" data-title="What is Lorem Ipsum">
        <p>...</p>
    </div>
    <div data-block="item" data-title="Where does it come from" data-expanded="true">
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
    </div>
    <div data-block="item" data-title="Why do we use it">
        <p>...</p>
    </div>
    <div data-block="item" data-title="Where can I get some">
        <p>...</p>
    </div>
</div>
Copied to clipboard

The attributes of the nested <div data-block="feed-item">:

Attribute Description
data-title * Name of the list item.
data-expanded

Displays the element expanded. Possible values:

  • true — The element is displayed expanded.
  • false — The element is displayed collapsed.

By default, all elements are collapsed.

Attribute Description
data-title * Name of the list item.
data-expanded

Displays the element expanded. Possible values:

  • true — The element is displayed expanded.
  • false — The element is displayed collapsed.

By default, all elements are collapsed.

*Required attribute.