Accordion

An accordion allows users to expand and collapse sections of content.

Browser support•
Visual representation

Honeycomb provides both visual and actual implementation of accordion element.

For native implementation we heavily rely on native browser support of <details> and <summary> elements. Just add "honeycomb" flix-accordion, flix-accordion__title and flix-accordion__content classes to <details> and <summary> tags for everything to work using the native supporting browser's implementation.

As simple as that:

    
        Lorem ipsum!
    
    
        Oluptia nectatur?
    
<details class="flix-accordion">
    <summary class="flix-accordion__title">
        Lorem ipsum!
    </summary>
    <article class="flix-accordion__content">
        Oluptia nectatur?
    </article>
</details>
<details class="flix-accordion">
    <summary class="flix-accordion__title">
        Lorem ipsum!
    </summary>
    <article class="flix-accordion__content">
        Oluptia nectatur?
    </article>
</details>

If you design requires some custom HTML inside, this is also possible:

We are commited to your safety

For everyones safety:

Check-in is contactless
Buses are extensively disinfected
Trains are thoroughly cleaned
Passengers must wear maks
Stay seated while on board

Check our guidelines

<details class="flix-accordion" open="">
  <summary class="flix-accordion__title">
    <div class="flix-grid flix-grid--align-center">
        <div class="flix-col flix-col--inline">
            <i class="flix-icon flix-icon--size-4 flix-icon-anti-virus" aria-hidden="true"></i>
        </div>
        <div class="flix-col">
            <p class="flix-text">We are commited to your safety</p>
        </div>
    </div>
  </summary>
  <article class="flix-accordion__content">
      <p class="flix-text">For everyones safety:</p>
      <ul class="flix-list">
        <li class="flix-list__item">Check-in is contactless</li>
        <li class="flix-list__item">Buses are extensively disinfected</li>
        <li class="flix-list__item">Trains are thoroughly cleaned</li>
        <li class="flix-list__item">Passengers must wear maks</li>
        <li class="flix-list__item">Stay seated while on board</li>
      </ul>
      <p class="flix-text flix-has-text-right">
        <a class="flix-link">Check our guidelines</a>
      </p>
  </article>
</details>

<details class="flix-accordion" open="">
  <summary class="flix-accordion__title">
    <div class="flix-grid flix-grid--align-center">
        <div class="flix-col flix-col--inline">
            <i class="flix-icon flix-icon--size-4 flix-icon-anti-virus" aria-hidden="true"></i>
        </div>
        <div class="flix-col">
            <p class="flix-text">We are commited to your safety</p>
        </div>
    </div>
  </summary>
  <article class="flix-accordion__content">
      <p class="flix-text">For everyones safety:</p>
      <ul class="flix-list">
        <li class="flix-list__item">Check-in is contactless</li>
        <li class="flix-list__item">Buses are extensively disinfected</li>
        <li class="flix-list__item">Trains are thoroughly cleaned</li>
        <li class="flix-list__item">Passengers must wear maks</li>
        <li class="flix-list__item">Stay seated while on board</li>
      </ul>
      <p class="flix-text flix-has-text-right">
        <a class="flix-link">Check our guidelines</a>
      </p>
  </article>
</details>

Note the usage of open HTML attribute in <details> element to show accordion expanded by default.

Browser support

Although <details> element is supported in many major browsers, there are some exceptions like IE11/Edge. In order to mimic the native behaviour in there, we provide an optional simple polyfill plugin.

Basic plugin usage instructions:

Include polyfill from CDN in the end of your page:

<script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/accordion.js"></script>
<script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/accordion.js"></script>

Initialize plugin with a simple one liner: accordion.init();
All the flix-accordion elements should now behave properly on your page

This accordion polyfill can also be used if for some reason you want other HTML tags to behave in the same way (e,g, have a "div-only" markup). However, we strongly suggest to stick to native specifications.

Here is a working example using DIVs together with the plugin:

        Lorem ipsum!
    

        Oluptia nectatur? Idistiis et eic tecusap ietur, sintiae ressit, qui inctis accum, odit, voluptio tendundit harchil laborunt am laut quat ipit a perestibus et laborruptio elianda ectionectur siti nus consequia cum imo verit qui voluptatem everum idempere exerum in earum suntem quam ame labor apel inveliatem repera inum estemporem ea iumet occae odit occulpa
    
<div class="flix-accordion">
    <div class="flix-accordion__title" tabindex="0">
        Lorem ipsum!
    </div>
    <article class="flix-accordion__content">
        Oluptia nectatur? Idistiis et eic tecusap ietur, sintiae ressit, qui inctis accum, odit, voluptio tendundit harchil laborunt am laut quat ipit a perestibus et laborruptio elianda ectionectur siti nus consequia cum imo verit qui voluptatem everum idempere exerum in earum suntem quam ame labor apel inveliatem repera inum estemporem ea iumet occae odit occulpa
    </article>
</div>
<div class="flix-accordion">
    <div class="flix-accordion__title" tabindex="0">
        Lorem ipsum!
    </div>
    <article class="flix-accordion__content">
        Oluptia nectatur? Idistiis et eic tecusap ietur, sintiae ressit, qui inctis accum, odit, voluptio tendundit harchil laborunt am laut quat ipit a perestibus et laborruptio elianda ectionectur siti nus consequia cum imo verit qui voluptatem everum idempere exerum in earum suntem quam ame labor apel inveliatem repera inum estemporem ea iumet occae odit occulpa
    </article>
</div>

Visual representation

If you need a visual representation only and have your own scripts that control accordion behaviour you can simply not include the polyfill and have your preferable HTML markup without <details> and <summary> elements. To control the "open" state of the element flix-accordion--open modifier or [open] HTML attribute can be used.