# accordion

The markup of every demo on <https://kuiper.oeds.it/accordion/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## default

The component with no options set -- what the markup alone gives you, before any parameter is tuned. Read this one first: every other panel on the page is a departure from it.

Varies: 15 specimens.

```html
<div class="border grid-collapse grid-divider grid-xs" data-grid data-accordion="">
 <div class="width-1-1" data-accordion-item>
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1">
     <div class="card padding-4xs-vertical padding-2xs-horizontal">
      <div class="grid-xs flex-middle" data-grid>
       <div class="width-expand">
        <div class="card">
         <h3 class="text-truncate">Title 1</h3>
        </div>
       </div>
       <div class="width-auto">
        <div class="card">
         <button class="button button-2xs button-icon accordion-toggle-icon" data-icon="angle-bottom"></button>
        </div>
       </div>
      </div>
      <a data-accordion-toggle></a>
     </div>
    </div>
    <div class="width-1-1 accordion-content">
     <div class="card padding-2xs padding-remove-top">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero magna. Nullam mollis, magna vel feugiat consectetur, ante dolor suscipit diam, ac ullamcorper risus eros quis risus. Vestibulum viverra nibh sit amet dolor vestibulum vestibulum. Etiam id ultricies tortor. Quisque varius turpis nec pharetra consectetur. Pellentesque mauris diam, cursus sed malesuada ac, fringilla ut nibh. Mauris vitae accumsan nulla. Donec luctus est turpis, tristique vehicula tortor aliquam et. Etiam iaculis accumsan risus eget blandit.</p>
      <p>Donec luctus, dolor in suscipit aliquet, risus arcu condimentum est, et rutrum lectus risus vel libero. Nulla bibendum eros nec dolor eleifend, ut fringilla velit laoreet. Cras at tortor gravida, aliquam ligula eget, dapibus sapien. Maecenas nec lectus id neque tincidunt viverra lobortis in lectus. Nam bibendum sit amet ex nec hendrerit. Phasellus sit amet urna vel velit fringilla sagittis vitae in dui. Fusce vitae semper lorem. Proin vitae tincidunt nunc. Nunc volutpat, orci tristique hendrerit porta, nunc justo pretium nisi, eu vehicula quam diam quis lorem.</p>
      <p>In tincidunt est in faucibus congue. Etiam viverra, purus vitae tempus commodo, ipsum arcu imperdiet massa, eget blandit magna augue id justo. In id lacus efficitur, sollicitudin est sit amet, cursus lectus. Phasellus volutpat malesuada luctus. Aliquam vel porttitor odio. Cras eget mollis risus. Curabitur volutpat eleifend sagittis. Donec semper non nulla eu eleifend. Nulla ac fringilla arcu, sit amet volutpat erat.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="width-1-1" data-accordion-item>
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1">
     <div class="card padding-4xs-vertical padding-2xs-horizontal">
      <div class="grid-xs flex-middle" data-grid>
       <div class="width-expand">
        <div class="card">
         <h3 class="text-truncate">Title 2</h3>
        </div>
       </div>
       <div class="width-auto">
        <div class="card">
         <button class="button button-2xs button-icon accordion-toggle-icon" data-icon="angle-bottom"></button>
        </div>
       </div>
      </div>
      <a data-accordion-toggle></a>
     </div>
    </div>
    <div class="width-1-1 accordion-content">
     <div class="card padding-2xs padding-remove-top">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero magna. Nullam mollis, magna vel feugiat consectetur, ante dolor suscipit diam, ac ullamcorper risus eros quis risus. Vestibulum viverra nibh sit amet dolor vestibulum vestibulum. Etiam id ultricies tortor. Quisque varius turpis nec pharetra consectetur. Pellentesque mauris diam, cursus sed malesuada ac, fringilla ut nibh. Mauris vitae accumsan nulla. Donec luctus est turpis, tristique vehicula tortor aliquam et. Etiam iaculis accumsan risus eget blandit.</p>
      <p>Donec luctus, dolor in suscipit aliquet, risus arcu condimentum est, et rutrum lectus risus vel libero. Nulla bibendum eros nec dolor eleifend, ut fringilla velit laoreet. Cras at tortor gravida, aliquam ligula eget, dapibus sapien. Maecenas nec lectus id neque tincidunt viverra lobortis in lectus. Nam bibendum sit amet ex nec hendrerit. Phasellus sit amet urna vel velit fringilla sagittis vitae in dui. Fusce vitae semper lorem. Proin vitae tincidunt nunc. Nunc volutpat, orci tristique hendrerit porta, nunc justo pretium nisi, eu vehicula quam diam quis lorem.</p>
      <p>In tincidunt est in faucibus congue. Etiam viverra, purus vitae tempus commodo, ipsum arcu imperdiet massa, eget blandit magna augue id justo. In id lacus efficitur, sollicitudin est sit amet, cursus lectus. Phasellus volutpat malesuada luctus. Aliquam vel porttitor odio. Cras eget mollis risus. Curabitur volutpat eleifend sagittis. Donec semper non nulla eu eleifend. Nulla ac fringilla arcu, sit amet volutpat erat.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="width-1-1" data-accordion-item>
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1">
     <div class="card padding-4xs-vertical padding-2xs-horizontal">
      <div class="grid-xs flex-middle" data-grid>
       <div class="width-expand">
        <div class="card">
         <h3 class="text-truncate">Title 3</h3>
        </div>
       </div>
       <div class="width-auto">
        <div class="card">
         <button class="button button-2xs button-icon accordion-toggle-icon" data-icon="angle-bottom"></button>
        </div>
       </div>
      </div>
      <a data-accordion-toggle></a>
     </div>
    </div>
    <div class="width-1-1 accordion-content">
     <div class="card padding-2xs padding-remove-top">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero magna. Nullam mollis, magna vel feugiat consectetur, ante dolor suscipit diam, ac ullamcorper risus eros quis risus. Vestibulum viverra nibh sit amet dolor vestibulum vestibulum. Etiam id ultricies tortor. Quisque varius turpis nec pharetra consectetur. Pellentesque mauris diam, cursus sed malesuada ac, fringilla ut nibh. Mauris vitae accumsan nulla. Donec luctus est turpis, tristique vehicula tortor aliquam et. Etiam iaculis accumsan risus eget blandit.</p>
      <p>Donec luctus, dolor in suscipit aliquet, risus arcu condimentum est, et rutrum lectus risus vel libero. Nulla bibendum eros nec dolor eleifend, ut fringilla velit laoreet. Cras at tortor gravida, aliquam ligula eget, dapibus sapien. Maecenas nec lectus id neque tincidunt viverra lobortis in lectus. Nam bibendum sit amet ex nec hendrerit. Phasellus sit amet urna vel velit fringilla sagittis vitae in dui. Fusce vitae semper lorem. Proin vitae tincidunt nunc. Nunc volutpat, orci tristique hendrerit porta, nunc justo pretium nisi, eu vehicula quam diam quis lorem.</p>
      <p>In tincidunt est in faucibus congue. Etiam viverra, purus vitae tempus commodo, ipsum arcu imperdiet massa, eget blandit magna augue id justo. In id lacus efficitur, sollicitudin est sit amet, cursus lectus. Phasellus volutpat malesuada luctus. Aliquam vel porttitor odio. Cras eget mollis risus. Curabitur volutpat eleifend sagittis. Donec semper non nulla eu eleifend. Nulla ac fringilla arcu, sit amet volutpat erat.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```

## multiple

Varies: 15 specimens.

```html
<div class="border grid-collapse grid-divider grid-xs" data-grid data-accordion="multiple:true;">
 <div class="width-1-1" data-accordion-item>
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1">
     <div class="card padding-4xs-vertical padding-2xs-horizontal">
      <div class="grid-xs flex-middle" data-grid>
       <div class="width-expand">
        <div class="card">
         <h3 class="text-truncate">Title 1</h3>
        </div>
       </div>
       <div class="width-auto">
        <div class="card">
         <button class="button button-2xs button-icon accordion-toggle-icon" data-icon="angle-bottom"></button>
        </div>
       </div>
      </div>
      <a data-accordion-toggle></a>
     </div>
    </div>
    <div class="width-1-1 accordion-content">
     <div class="card padding-2xs padding-remove-top">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero magna. Nullam mollis, magna vel feugiat consectetur, ante dolor suscipit diam, ac ullamcorper risus eros quis risus. Vestibulum viverra nibh sit amet dolor vestibulum vestibulum. Etiam id ultricies tortor. Quisque varius turpis nec pharetra consectetur. Pellentesque mauris diam, cursus sed malesuada ac, fringilla ut nibh. Mauris vitae accumsan nulla. Donec luctus est turpis, tristique vehicula tortor aliquam et. Etiam iaculis accumsan risus eget blandit.</p>
      <p>Donec luctus, dolor in suscipit aliquet, risus arcu condimentum est, et rutrum lectus risus vel libero. Nulla bibendum eros nec dolor eleifend, ut fringilla velit laoreet. Cras at tortor gravida, aliquam ligula eget, dapibus sapien. Maecenas nec lectus id neque tincidunt viverra lobortis in lectus. Nam bibendum sit amet ex nec hendrerit. Phasellus sit amet urna vel velit fringilla sagittis vitae in dui. Fusce vitae semper lorem. Proin vitae tincidunt nunc. Nunc volutpat, orci tristique hendrerit porta, nunc justo pretium nisi, eu vehicula quam diam quis lorem.</p>
      <p>In tincidunt est in faucibus congue. Etiam viverra, purus vitae tempus commodo, ipsum arcu imperdiet massa, eget blandit magna augue id justo. In id lacus efficitur, sollicitudin est sit amet, cursus lectus. Phasellus volutpat malesuada luctus. Aliquam vel porttitor odio. Cras eget mollis risus. Curabitur volutpat eleifend sagittis. Donec semper non nulla eu eleifend. Nulla ac fringilla arcu, sit amet volutpat erat.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="width-1-1" data-accordion-item>
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1">
     <div class="card padding-4xs-vertical padding-2xs-horizontal">
      <div class="grid-xs flex-middle" data-grid>
       <div class="width-expand">
        <div class="card">
         <h3 class="text-truncate">Title 2</h3>
        </div>
       </div>
       <div class="width-auto">
        <div class="card">
         <button class="button button-2xs button-icon accordion-toggle-icon" data-icon="angle-bottom"></button>
        </div>
       </div>
      </div>
      <a data-accordion-toggle></a>
     </div>
    </div>
    <div class="width-1-1 accordion-content">
     <div class="card padding-2xs padding-remove-top">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero magna. Nullam mollis, magna vel feugiat consectetur, ante dolor suscipit diam, ac ullamcorper risus eros quis risus. Vestibulum viverra nibh sit amet dolor vestibulum vestibulum. Etiam id ultricies tortor. Quisque varius turpis nec pharetra consectetur. Pellentesque mauris diam, cursus sed malesuada ac, fringilla ut nibh. Mauris vitae accumsan nulla. Donec luctus est turpis, tristique vehicula tortor aliquam et. Etiam iaculis accumsan risus eget blandit.</p>
      <p>Donec luctus, dolor in suscipit aliquet, risus arcu condimentum est, et rutrum lectus risus vel libero. Nulla bibendum eros nec dolor eleifend, ut fringilla velit laoreet. Cras at tortor gravida, aliquam ligula eget, dapibus sapien. Maecenas nec lectus id neque tincidunt viverra lobortis in lectus. Nam bibendum sit amet ex nec hendrerit. Phasellus sit amet urna vel velit fringilla sagittis vitae in dui. Fusce vitae semper lorem. Proin vitae tincidunt nunc. Nunc volutpat, orci tristique hendrerit porta, nunc justo pretium nisi, eu vehicula quam diam quis lorem.</p>
      <p>In tincidunt est in faucibus congue. Etiam viverra, purus vitae tempus commodo, ipsum arcu imperdiet massa, eget blandit magna augue id justo. In id lacus efficitur, sollicitudin est sit amet, cursus lectus. Phasellus volutpat malesuada luctus. Aliquam vel porttitor odio. Cras eget mollis risus. Curabitur volutpat eleifend sagittis. Donec semper non nulla eu eleifend. Nulla ac fringilla arcu, sit amet volutpat erat.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="width-1-1" data-accordion-item>
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1">
     <div class="card padding-4xs-vertical padding-2xs-horizontal">
      <div class="grid-xs flex-middle" data-grid>
       <div class="width-expand">
        <div class="card">
         <h3 class="text-truncate">Title 3</h3>
        </div>
       </div>
       <div class="width-auto">
        <div class="card">
         <button class="button button-2xs button-icon accordion-toggle-icon" data-icon="angle-bottom"></button>
        </div>
       </div>
      </div>
      <a data-accordion-toggle></a>
     </div>
    </div>
    <div class="width-1-1 accordion-content">
     <div class="card padding-2xs padding-remove-top">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero magna. Nullam mollis, magna vel feugiat consectetur, ante dolor suscipit diam, ac ullamcorper risus eros quis risus. Vestibulum viverra nibh sit amet dolor vestibulum vestibulum. Etiam id ultricies tortor. Quisque varius turpis nec pharetra consectetur. Pellentesque mauris diam, cursus sed malesuada ac, fringilla ut nibh. Mauris vitae accumsan nulla. Donec luctus est turpis, tristique vehicula tortor aliquam et. Etiam iaculis accumsan risus eget blandit.</p>
      <p>Donec luctus, dolor in suscipit aliquet, risus arcu condimentum est, et rutrum lectus risus vel libero. Nulla bibendum eros nec dolor eleifend, ut fringilla velit laoreet. Cras at tortor gravida, aliquam ligula eget, dapibus sapien. Maecenas nec lectus id neque tincidunt viverra lobortis in lectus. Nam bibendum sit amet ex nec hendrerit. Phasellus sit amet urna vel velit fringilla sagittis vitae in dui. Fusce vitae semper lorem. Proin vitae tincidunt nunc. Nunc volutpat, orci tristique hendrerit porta, nunc justo pretium nisi, eu vehicula quam diam quis lorem.</p>
      <p>In tincidunt est in faucibus congue. Etiam viverra, purus vitae tempus commodo, ipsum arcu imperdiet massa, eget blandit magna augue id justo. In id lacus efficitur, sollicitudin est sit amet, cursus lectus. Phasellus volutpat malesuada luctus. Aliquam vel porttitor odio. Cras eget mollis risus. Curabitur volutpat eleifend sagittis. Donec semper non nulla eu eleifend. Nulla ac fringilla arcu, sit amet volutpat erat.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```

## active

Varies: the `active` state.

```html
<div class="border grid-collapse grid-divider grid-xs" data-grid data-accordion="active:1;">
 <div class="width-1-1" data-accordion-item>
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1">
     <div class="card padding-4xs-vertical padding-2xs-horizontal">
      <div class="grid-xs flex-middle" data-grid>
       <div class="width-expand">
        <div class="card">
         <h3 class="text-truncate">Title 1</h3>
        </div>
       </div>
       <div class="width-auto">
        <div class="card">
         <button class="button button-2xs button-icon accordion-toggle-icon" data-icon="angle-bottom"></button>
        </div>
       </div>
      </div>
      <a data-accordion-toggle></a>
     </div>
    </div>
    <div class="width-1-1 accordion-content">
     <div class="card padding-2xs padding-remove-top">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero magna. Nullam mollis, magna vel feugiat consectetur, ante dolor suscipit diam, ac ullamcorper risus eros quis risus. Vestibulum viverra nibh sit amet dolor vestibulum vestibulum. Etiam id ultricies tortor. Quisque varius turpis nec pharetra consectetur. Pellentesque mauris diam, cursus sed malesuada ac, fringilla ut nibh. Mauris vitae accumsan nulla. Donec luctus est turpis, tristique vehicula tortor aliquam et. Etiam iaculis accumsan risus eget blandit.</p>
      <p>Donec luctus, dolor in suscipit aliquet, risus arcu condimentum est, et rutrum lectus risus vel libero. Nulla bibendum eros nec dolor eleifend, ut fringilla velit laoreet. Cras at tortor gravida, aliquam ligula eget, dapibus sapien. Maecenas nec lectus id neque tincidunt viverra lobortis in lectus. Nam bibendum sit amet ex nec hendrerit. Phasellus sit amet urna vel velit fringilla sagittis vitae in dui. Fusce vitae semper lorem. Proin vitae tincidunt nunc. Nunc volutpat, orci tristique hendrerit porta, nunc justo pretium nisi, eu vehicula quam diam quis lorem.</p>
      <p>In tincidunt est in faucibus congue. Etiam viverra, purus vitae tempus commodo, ipsum arcu imperdiet massa, eget blandit magna augue id justo. In id lacus efficitur, sollicitudin est sit amet, cursus lectus. Phasellus volutpat malesuada luctus. Aliquam vel porttitor odio. Cras eget mollis risus. Curabitur volutpat eleifend sagittis. Donec semper non nulla eu eleifend. Nulla ac fringilla arcu, sit amet volutpat erat.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="width-1-1" data-accordion-item>
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1">
     <div class="card padding-4xs-vertical padding-2xs-horizontal">
      <div class="grid-xs flex-middle" data-grid>
       <div class="width-expand">
        <div class="card">
         <h3 class="text-truncate">Title 2</h3>
        </div>
       </div>
       <div class="width-auto">
        <div class="card">
         <button class="button button-2xs button-icon accordion-toggle-icon" data-icon="angle-bottom"></button>
        </div>
       </div>
      </div>
      <a data-accordion-toggle></a>
     </div>
    </div>
    <div class="width-1-1 accordion-content">
     <div class="card padding-2xs padding-remove-top">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero magna. Nullam mollis, magna vel feugiat consectetur, ante dolor suscipit diam, ac ullamcorper risus eros quis risus. Vestibulum viverra nibh sit amet dolor vestibulum vestibulum. Etiam id ultricies tortor. Quisque varius turpis nec pharetra consectetur. Pellentesque mauris diam, cursus sed malesuada ac, fringilla ut nibh. Mauris vitae accumsan nulla. Donec luctus est turpis, tristique vehicula tortor aliquam et. Etiam iaculis accumsan risus eget blandit.</p>
      <p>Donec luctus, dolor in suscipit aliquet, risus arcu condimentum est, et rutrum lectus risus vel libero. Nulla bibendum eros nec dolor eleifend, ut fringilla velit laoreet. Cras at tortor gravida, aliquam ligula eget, dapibus sapien. Maecenas nec lectus id neque tincidunt viverra lobortis in lectus. Nam bibendum sit amet ex nec hendrerit. Phasellus sit amet urna vel velit fringilla sagittis vitae in dui. Fusce vitae semper lorem. Proin vitae tincidunt nunc. Nunc volutpat, orci tristique hendrerit porta, nunc justo pretium nisi, eu vehicula quam diam quis lorem.</p>
      <p>In tincidunt est in faucibus congue. Etiam viverra, purus vitae tempus commodo, ipsum arcu imperdiet massa, eget blandit magna augue id justo. In id lacus efficitur, sollicitudin est sit amet, cursus lectus. Phasellus volutpat malesuada luctus. Aliquam vel porttitor odio. Cras eget mollis risus. Curabitur volutpat eleifend sagittis. Donec semper non nulla eu eleifend. Nulla ac fringilla arcu, sit amet volutpat erat.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="width-1-1" data-accordion-item>
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1">
     <div class="card padding-4xs-vertical padding-2xs-horizontal">
      <div class="grid-xs flex-middle" data-grid>
       <div class="width-expand">
        <div class="card">
         <h3 class="text-truncate">Title 3</h3>
        </div>
       </div>
       <div class="width-auto">
        <div class="card">
         <button class="button button-2xs button-icon accordion-toggle-icon" data-icon="angle-bottom"></button>
        </div>
       </div>
      </div>
      <a data-accordion-toggle></a>
     </div>
    </div>
    <div class="width-1-1 accordion-content">
     <div class="card padding-2xs padding-remove-top">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero magna. Nullam mollis, magna vel feugiat consectetur, ante dolor suscipit diam, ac ullamcorper risus eros quis risus. Vestibulum viverra nibh sit amet dolor vestibulum vestibulum. Etiam id ultricies tortor. Quisque varius turpis nec pharetra consectetur. Pellentesque mauris diam, cursus sed malesuada ac, fringilla ut nibh. Mauris vitae accumsan nulla. Donec luctus est turpis, tristique vehicula tortor aliquam et. Etiam iaculis accumsan risus eget blandit.</p>
      <p>Donec luctus, dolor in suscipit aliquet, risus arcu condimentum est, et rutrum lectus risus vel libero. Nulla bibendum eros nec dolor eleifend, ut fringilla velit laoreet. Cras at tortor gravida, aliquam ligula eget, dapibus sapien. Maecenas nec lectus id neque tincidunt viverra lobortis in lectus. Nam bibendum sit amet ex nec hendrerit. Phasellus sit amet urna vel velit fringilla sagittis vitae in dui. Fusce vitae semper lorem. Proin vitae tincidunt nunc. Nunc volutpat, orci tristique hendrerit porta, nunc justo pretium nisi, eu vehicula quam diam quis lorem.</p>
      <p>In tincidunt est in faucibus congue. Etiam viverra, purus vitae tempus commodo, ipsum arcu imperdiet massa, eget blandit magna augue id justo. In id lacus efficitur, sollicitudin est sit amet, cursus lectus. Phasellus volutpat malesuada luctus. Aliquam vel porttitor odio. Cras eget mollis risus. Curabitur volutpat eleifend sagittis. Donec semper non nulla eu eleifend. Nulla ac fringilla arcu, sit amet volutpat erat.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```