Accordion Basics

Accordions can help organize and navigate multiple documents within a single container. They can also be used for switching between items in the container.

Coding standards for accordions on AutoZonePro.com are as follows:

  1. Wrapping element with .accordion class, and data-accordion attribute

  2. Inner element with .accordion-item class, and data-accordion-item attribute

  3. Anchor <a> element with .accordion-title class to activate the content

  4. Content area <div> with .accordion-content class, and data-tab-content attribute

Tip: To control which item is open by default, add the .is-active class to the .accordion-item element.

<ul class="accordion" data-accordion>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion Title #1</a>
    <div class="accordion-content" data-tab-content>
        <div class="column row">
            <h5>Accordion Title #1</h5>
            <p>Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips...</p>
        </div>
    </div>
  </li>
  ...
</ul>

Default Accordion

  • Accordion Title #1
    Accordion Content

    Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips ugh put a bird on it DIY disrupt tousled. Street art cornhole literally, church-key butcher portland flexitarian salvia. Jean shorts fanny pack retro readymade chillwave. Skateboard taxidermy hoodie disrupt, iPhone truffaut squid chillwave. Lumbersexual selvage beard, neutra echo park vice street art man bun tumblr. IPhone aesthetic bitters church-key, chartreuse dreamcatcher squid pickled pitchfork. Actually williamsburg brunch banjo, fap readymade cronut before they sold out vinyl viral bespoke bushwick whatever knausgaard locavore.

  • Accordion Title #2
    Accordion Content

    Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips ugh put a bird on it DIY disrupt tousled. Street art cornhole literally, church-key butcher portland flexitarian salvia. Jean shorts fanny pack retro readymade chillwave. Skateboard taxidermy hoodie disrupt, iPhone truffaut squid chillwave. Lumbersexual selvage beard, neutra echo park vice street art man bun tumblr. IPhone aesthetic bitters church-key, chartreuse dreamcatcher squid pickled pitchfork. Actually williamsburg brunch banjo, fap readymade cronut before they sold out vinyl viral bespoke bushwick whatever knausgaard locavore.

  • Accordion Title #3
    Accordion Content

    This content is open by default because it has the .is-active class added to the .accordion-item element.

  • Accordion Title #4
    Accordion Content

    Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips ugh put a bird on it DIY disrupt tousled. Street art cornhole literally, church-key butcher portland flexitarian salvia. Jean shorts fanny pack retro readymade chillwave. Skateboard taxidermy hoodie disrupt, iPhone truffaut squid chillwave. Lumbersexual selvage beard, neutra echo park vice street art man bun tumblr. IPhone aesthetic bitters church-key, chartreuse dreamcatcher squid pickled pitchfork. Actually williamsburg brunch banjo, fap readymade cronut before they sold out vinyl viral bespoke bushwick whatever knausgaard locavore.

Multi-Expand Accordion

By default, only one pane of an accordion can be open at a time, but adding data-multi-expand="true" attribute to the .accordion element will allow multiple accordions to be open at the same time.

  • Accordion Title #1
    Accordion Content

    Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips ugh put a bird on it DIY disrupt tousled. Street art cornhole literally, church-key butcher portland flexitarian salvia. Jean shorts fanny pack retro readymade chillwave. Skateboard taxidermy hoodie disrupt, iPhone truffaut squid chillwave. Lumbersexual selvage beard, neutra echo park vice street art man bun tumblr. IPhone aesthetic bitters church-key, chartreuse dreamcatcher squid pickled pitchfork. Actually williamsburg brunch banjo, fap readymade cronut before they sold out vinyl viral bespoke bushwick whatever knausgaard locavore.

  • Accordion Title #2
    Accordion Content

    Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips ugh put a bird on it DIY disrupt tousled. Street art cornhole literally, church-key butcher portland flexitarian salvia. Jean shorts fanny pack retro readymade chillwave. Skateboard taxidermy hoodie disrupt, iPhone truffaut squid chillwave. Lumbersexual selvage beard, neutra echo park vice street art man bun tumblr. IPhone aesthetic bitters church-key, chartreuse dreamcatcher squid pickled pitchfork. Actually williamsburg brunch banjo, fap readymade cronut before they sold out vinyl viral bespoke bushwick whatever knausgaard locavore.

  • Accordion Title #3
    Accordion Content

    Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips ugh put a bird on it DIY disrupt tousled. Street art cornhole literally, church-key butcher portland flexitarian salvia. Jean shorts fanny pack retro readymade chillwave. Skateboard taxidermy hoodie disrupt, iPhone truffaut squid chillwave. Lumbersexual selvage beard, neutra echo park vice street art man bun tumblr. IPhone aesthetic bitters church-key, chartreuse dreamcatcher squid pickled pitchfork. Actually williamsburg brunch banjo, fap readymade cronut before they sold out vinyl viral bespoke bushwick whatever knausgaard locavore.

  • Accordion Title #4
    Accordion Content

    This content is open by default because it has the .is-active class added to the .accordion-item element.

Allow All-Closed Accordion

By default, at least one pane in an accordion must be open, but adding data-allow-all-closed="true" attribute to the .accordion element will allow all accordions to be closed at the same time.

  • Accordion Title #1
    Accordion Content

    Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips ugh put a bird on it DIY disrupt tousled. Street art cornhole literally, church-key butcher portland flexitarian salvia. Jean shorts fanny pack retro readymade chillwave. Skateboard taxidermy hoodie disrupt, iPhone truffaut squid chillwave. Lumbersexual selvage beard, neutra echo park vice street art man bun tumblr. IPhone aesthetic bitters church-key, chartreuse dreamcatcher squid pickled pitchfork. Actually williamsburg brunch banjo, fap readymade cronut before they sold out vinyl viral bespoke bushwick whatever knausgaard locavore.

  • Accordion Title #2
    Accordion Content

    Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips ugh put a bird on it DIY disrupt tousled. Street art cornhole literally, church-key butcher portland flexitarian salvia. Jean shorts fanny pack retro readymade chillwave. Skateboard taxidermy hoodie disrupt, iPhone truffaut squid chillwave. Lumbersexual selvage beard, neutra echo park vice street art man bun tumblr. IPhone aesthetic bitters church-key, chartreuse dreamcatcher squid pickled pitchfork. Actually williamsburg brunch banjo, fap readymade cronut before they sold out vinyl viral bespoke bushwick whatever knausgaard locavore.

  • Accordion Title #3
    Accordion Content

    Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips ugh put a bird on it DIY disrupt tousled. Street art cornhole literally, church-key butcher portland flexitarian salvia. Jean shorts fanny pack retro readymade chillwave. Skateboard taxidermy hoodie disrupt, iPhone truffaut squid chillwave. Lumbersexual selvage beard, neutra echo park vice street art man bun tumblr. IPhone aesthetic bitters church-key, chartreuse dreamcatcher squid pickled pitchfork. Actually williamsburg brunch banjo, fap readymade cronut before they sold out vinyl viral bespoke bushwick whatever knausgaard locavore.

  • Accordion Title #4
    Accordion Content

    Gastropub slow-carb readymade brooklyn tumblr, sriracha kale chips ugh put a bird on it DIY disrupt tousled. Street art cornhole literally, church-key butcher portland flexitarian salvia. Jean shorts fanny pack retro readymade chillwave. Skateboard taxidermy hoodie disrupt, iPhone truffaut squid chillwave. Lumbersexual selvage beard, neutra echo park vice street art man bun tumblr. IPhone aesthetic bitters church-key, chartreuse dreamcatcher squid pickled pitchfork. Actually williamsburg brunch banjo, fap readymade cronut before they sold out vinyl viral bespoke bushwick whatever knausgaard locavore.