Accordion components

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that matches the other components' aesthetic.

Yes. It's animated by default, but you can disable it if you prefer.

<div class="panel">
   <div class="row">
      <div class="col">
         <h3>Accordions</h3>
         <accordion>
            <accordion-item title="Is it accessible?">
               <p class="text-muted">
                  Yes. It adheres to the WAI-ARIA design pattern.
               </p>
            </accordion-item>
            <accordion-item title="Is it styled?">
               <p class="text-muted">
                  Yes. It comes with default styles that matches the other 
                  components' aesthetic.
               </p>
            </accordion-item>
            <accordion-item title="Is it animated?">
               <p class="text-muted">
                  Yes. It's animated by default, but you can disable it 
                  if you prefer.
               </p>
            </accordion-item>
         </accordion>
      </div>
   </div>
</div>

Note this requires javascript (Vuejs 2.0)