Accordions

Collapsible content panels for presenting information in a limited space.

General Accordion

Sed magna mauris, hendrerit sit amet nisi a, ornare cursus mauris. Morbi vitae finibus neque. Nulla dignissim aliquam diam eget finibus.

Asperiores magni quae velit quaerat.

Ipsum alias voluptatibus dolorem hic.

Nam nec turpis non justo elementum cursus.

Nam nec turpis non justo elementum cursus. Etiam vel pellentesque nisl.

This is another section

Sed magna mauris, hendrerit sit amet nisi a, ornare cursus mauris. Morbi vitae finibus neque. Nulla dignissim aliquam diam eget finibus.

Asperiores magni quae velit quaerat.

Ipsum alias voluptatibus dolorem hic.

Nam nec turpis non justo elementum cursus.

Nam nec turpis non justo elementum cursus. Etiam vel pellentesque nisl.

Code Example Shortcut: z-accordion-1

<div class="accordion theme-light">
    <a href="" class="title accordion-toggle" aria-expanded="false" aria-controls="content1">
    <i class="zenicon-keyboard-arrow-right"></i> The title</a>
    <div id="content1" class="expanded-content" aria-hidden="true">
        <p>Expanded content here...</p>
    </div>

    <a class="title accordion-toggle" aria-expanded="false" aria-controls="content2">
    <i class="zenicon-keyboard-arrow-right"></i> The title 2</a>
    <div id="content2" class="expanded-content" aria-hidden="true">
        <p>Expanded content here...</p>
    </div>
</div>

Naked Accordion

This is an expandable section

Sed magna mauris, hendrerit sit amet nisi a, ornare cursus mauris. Morbi vitae finibus neque. Nulla dignissim aliquam diam eget finibus.

Asperiores magni quae velit quaerat.

Ipsum alias voluptatibus dolorem hic.

Nam nec turpis non justo elementum cursus.

Nam nec turpis non justo elementum cursus. Etiam vel pellentesque nisl.

This is another section

Sed magna mauris, hendrerit sit amet nisi a, ornare cursus mauris. Morbi vitae finibus neque. Nulla dignissim aliquam diam eget finibus. Nam nec turpis non justo elementum cursus. Etiam vel pellentesque nisl. Suspendisse potenti. Etiam in laoreet orci, in aliquam enim. Nullam condimentum elementum congue. Vestibulum semper justo vitae sollicitudin tempus. Praesent dictum pharetra interdum. Etiam vitae viverra elit. Pellentesque a ipsum in turpis consequat euismod.

Code Example Shortcut: z-accordion-2

<div class="accordion theme-light">
    <a href="" class="title accordion-toggle naked text-semibold" aria-expanded="false" aria-controls="content1">
    <i class="zenicon-keyboard-arrow-right"></i> The title</a>
    <div id="content1" class="expanded-content naked" aria-hidden="true">
        <p>Expanded content here...</p>
    </div>

    <a class="title accordion-toggle naked text-semibold" aria-expanded="false" aria-controls="content2">
    <i class="zenicon-keyboard-arrow-right"></i> The title 2</a>
    <div id="content2" class="expanded-content naked" aria-hidden="true">
        <p>Expanded content here...</p>
    </div>
</div>

Animation disabled

Expandable section (animation disabled)

Sed magna mauris, hendrerit sit amet nisi a, ornare cursus mauris. Morbi vitae finibus neque. Nulla dignissim aliquam diam eget finibus.

Asperiores magni quae velit quaerat.

Ipsum alias voluptatibus dolorem hic.

Nam nec turpis non justo elementum cursus.

Nam nec turpis non justo elementum cursus. Etiam vel pellentesque nisl.

Expandable section 2 (animation disabled)

Code Example Shortcut: z-accordion-3

<div class="accordion theme-light">
    <a href="" class="title accordion-toggle naked text-semibold" aria-expanded="false" aria-controls="content1">
    <i class="zenicon-keyboard-arrow-right"></i> The title</a>
    <div id="content1" class="expanded-content naked static" aria-hidden="true">
        <p>Expanded content here...</p>
    </div>

    <a class="title accordion-toggle naked text-semibold" aria-expanded="false" aria-controls="content2">
    <i class="zenicon-keyboard-arrow-right"></i> The title 2</a>
    <div id="content2" class="expanded-content naked static" aria-hidden="true">
        <p>Expanded content here...</p>
    </div>
</div>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.