Accordion Examples

Basic Accordion

The basic accordion control with default styling.

  • Put a bird on it

    Pickled keytar ethnic flexitarian, vegan ethical sartorial 8-bit yr williamsburg. Flexitarian typewriter viral, wolf banh mi gastropub letterpress street art mcsweeney's raw denim kogi semiotics blog.

  • Helvetica

    Williamsburg quinoa sartorial, tattooed VHS food truck polaroid authentic gentrify Austin readymade vinyl dreamcatcher freegan seitan.

  • You probably haven't heard of them

    Fanny pack seitan PBR synth, kale chips master cleanse helvetica high life artisan you probably haven't heard of them. Craft beer salvia high life, art party small batch retro pickled butcher scenester kale chips brooklyn 8-bit vinyl.

    Trust fund mustache typewriter, portland artisan irony seitan master cleanse biodiesel ethnic banh mi bushwick squid semiotics truffaut. Marfa vinyl mumblecore, selvage beard kale chips gentrify four loko gluten-free messenger bag cliche vice forage.

Code for this example:

<ul class="m-accordion">
  <li class="m-item">
    <h3 class="m-header">
      <a>Tab1</a>
    </h3>
    <div class="m-content">
      <div class="m-inner-content">
        <h2>Content 1</h2>
        <p>Lorem ipsum</p>
      </div>
    </div>
  </li>
  <li class="m-item">
    <h3 class="m-header">
      <a>Tab2</a>
    </h3>
    <div class="m-content">
      <div class="m-inner-content">
        <h2>Content 2</h2>
        <p>Lorem ipsum</p>
      </div>
    </div>
  </li>
</ul>

Image Indicators

The basic accordion control with images to reveal when a header is expanded or collapsed.

  • Twee lo-fi Austin iphone, PBR farm-to-table small batch brunch food truck. Beard +1 chillwave, ennui Austin portland blog chambray 3 wolf moon fingerstache farm-to-table. Four loko pork belly lomo shoreditch biodiesel authentic.

  • Fixie retro photo booth portland. Pop-up PBR hella, fingerstache photo booth beard tumblr aesthetic craft beer. Lo-fi banh mi cred, VHS squid sartorial helvetica pork belly high life brooklyn carles. Sustainable shoreditch bicycle rights fixie butcher street art.

  • Williamsburg skateboard raw denim typewriter brooklyn 8-bit. Direct trade raw denim pitchfork gastropub umami. Mumblecore +1 pinterest, ethical terry richardson skateboard mcsweeney's trust fund shoreditch cliche chambray. Gluten-free portland organic cray carles vice.

Code for this example:

<ul class="m-accordion m-indicators-images">
  <li class="m-item">
    <h3 class="m-header">
      <a>Tab1</a>
    </h3>
    <div class="m-content">
      <div class="m-inner-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
  </li>
  <li class="m-item">
    <h3 class="m-header">
      <a>Tab2</a>
    </h3>
    <div class="m-content">
      <div class="m-inner-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
  </li>
</ul>

Textual Indicators

The basic accordion control with +/- CSS indicators that reveal when a header is expanded or collapsed.

  • Truffaut bicycle rights mlkshk freegan williamsburg fingerstache. Kale chips before they sold out single-origin coffee, typewriter scenester craft beer +1.

  • Twee skateboard butcher wolf sriracha. Wes anderson wolf ennui tattooed, marfa raw denim craft beer carles locavore bushwick synth pinterest biodiesel pour-over. Raw denim scenester keytar, bespoke mixtape VHS mlkshk banh mi before they sold out fixie.

  • Authentic food truck jean shorts, viral 3 wolf moon kale chips synth leggings bushwick. Beard sriracha iphone jean shorts, banksy whatever biodiesel.

Code for this example:

<ul class="m-accordion m-indicators-css">
  <li class="m-item">
    <h3 class="m-header">
      <a>Tab1</a>
    </h3>
    <div class="m-content">
      <div class="m-inner-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
  </li>
  <li class="m-item">
    <h3 class="m-header">
      <a>Tab2</a>
    </h3>
    <div class="m-content">
      <div class="m-inner-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
  </li>
</ul>

CSS-only Indicators

The same style as the image indicators above, but CSS-only instead of images.

  • Iphone banksy fanny pack, portland pitchfork readymade messenger bag bushwick wes anderson mustache cardigan bespoke butcher mumblecore.

  • Gentrify vinyl wayfarers yr mumblecore, hoodie pop-up PBR VHS 3 wolf moon bushwick leggings ethical. Salvia put a bird on it squid retro before they sold out chillwave, street art lomo selvage keytar cardigan.

  • Locavore brooklyn next level american apparel. Banksy 3 wolf moon readymade, fanny pack kale chips farm-to-table fap letterpress. Four loko photo booth single-origin coffee art party, seitan Austin direct trade mixtape.

Code for this example:

<ul class="m-accordion m-indicators-css m-css-advanced">
  <li class="m-item">
    <h3 class="m-header">
      <a>Tab1</a>
    </h3>
    <div class="m-content">
      <div class="m-inner-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
  </li>
  <li class="m-item">
    <h3 class="m-header">
      <a>Tab2</a>
    </h3>
    <div class="m-content">
      <div class="m-inner-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
  </li>
</ul>

Arrow Indicators

The basic accordion control with CSS arrows to indicate open headers.

  • Pickled keytar ethnic flexitarian, vegan ethical sartorial 8-bit yr williamsburg. Flexitarian typewriter viral, wolf banh mi gastropub letterpress street art mcsweeney's raw denim kogi semiotics blog.

  • Williamsburg quinoa sartorial, tattooed VHS food truck polaroid authentic gentrify Austin readymade vinyl dreamcatcher freegan seitan.

  • Fanny pack seitan PBR synth, kale chips master cleanse helvetica high life artisan you probably haven't heard of them. Craft beer salvia high life, art party small batch retro pickled butcher scenester kale chips brooklyn 8-bit vinyl.

    Trust fund mustache typewriter, portland artisan irony seitan master cleanse biodiesel ethnic banh mi bushwick squid semiotics truffaut. Marfa vinyl mumblecore, selvage beard kale chips gentrify four loko gluten-free messenger bag cliche vice forage.

Code for this example:

<ul class="m-accordion m-arrows">
  <li class="m-item">
    <h3 class="m-header">
      <a>Tab1</a>
    </h3>
    <div class="m-content">
      <div class="m-inner-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
  </li>
  <li class="m-item">
    <h3 class="m-header">
      <a>Tab2</a>
    </h3>
    <div class="m-content">
      <div class="m-inner-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
  </li>
</ul>