Accordions

Find out how to add accordions to a University of Sussex web page.

Are you trying to do this in the WCM?

The easiest way to insert accordions is by using the accordion button

Standard accordions

This is an example of the standard accordion:

Title 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.
Title 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.
Title 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.

If you are not editing in the WCM, you can create the accordion above with the following code:

<dl class="accordion">
    <dt>Title 1</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.</p>
    </dd>
    <dt>Title 2</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.</p>
    </dd>
    <dt>Title 3</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.</p>
    </dd>
</dl>

<dl class="accordion">
    <dt class="palette2 swatch6">Title 1</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.</p>
    </dd>
    <dt class="palette3 swatch8">Title 2</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.</p>
    </dd>
    <dt class="palette3 swatch3">Title 3</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.</p>
    </dd>
</dl>

Auto-closing accordions

By default the accordions will allow you to open as many elements as you'd like. Sometimes it's nice to only allow one element to be open at a time. You can do this by defining the data-autoclose attribute.

The data-autoclose attribute is used on the dl tag and can have the value of either 1 (to auto-close) or 0 (to turn off the auto-close, the same as not having the attribute present).

Title 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.
Title 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.
Title 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.

<dl class="accordion" data-autoclose="1">
    <dt>Title 1</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.</p>
    </dd>
    <dt>Title 2</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.</p>
    </dd>
    
    <dt>Title 3</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula eros, tempor vitae dignissim nec, sollicitudin a odio. Curabitur nibh nibh, aliquet vel laoreet in, imperdiet nec metus. Sed vel nisi urna.</p>
    </dd>
</dl>

Staff website templates

Accordions

Are you trying to do this in the WCM?

Standard accordions

Auto-closing accordions