<div class="accordion"> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-a1" aria-expanded="false"> <h3>Accordion Header</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-a1" class="accordion__body collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> </div>

<div class="accordion"> <div class="accordion__item"> <div class="accordion__header" data-toggle="accordion" data-target="#accordion-a2" aria-expanded="true"> <h3>Accordion Header</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-a2" class="accordion__body collapse show"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> </div>

<div class="accordion"> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-descriptor" aria-expanded="false"> <h3>Accordion Header</h3> <span class="accordion__header-arrow"></span> <span class="accordion__header-description">You can add a short description here</span> </div> <div id="accordion-descriptor" class="accordion__body collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> </div>

<div class="accordion"> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-descriptor-icon" aria-expanded="false"> <h3 class="icon-dc2-locked">Accordion Header</h3> <span class="accordion__header-arrow"></span> <span class="accordion__header-description">You can add a short description here</span> </div> <div id="accordion-descriptor-icon" class="accordion__body collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> </div> <div class="accordion"> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-descriptor-icon-img" aria-expanded="false"> <h3> <img src="" data-icon="education/color/dc2-vocabulary.svg" alt="" role="presentation" /> Accordion Header</h3> <span class="accordion__header-arrow"></span> <span class="accordion__header-description">You can add a short description here</span> </div> <div id="accordion-descriptor-icon-img" class="accordion__body collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> </div>

<div class="accordion"> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-stacked-1" aria-expanded="false"> <h3>Accordion Header 1</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-stacked-1" class="accordion__body collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-stacked-2" aria-expanded="false"> <h3>Accordion Header 2</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-stacked-2" class="accordion__body collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-stacked-3" aria-expanded="false"> <h3>Accordion Header 3</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-stacked-3" class="accordion__body collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-stacked-4" aria-expanded="false"> <h3>Accordion Header 4</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-stacked-4" class="accordion__body collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> </div>

<div class="accordion accordion--group" id="accordionGroupA"> <div class="accordion__group-title">Section Heading</div> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-group-a-1" aria-expanded="false"> <h3>Accordion Header</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-group-a-1" class="accordion__body collapse" data-parent="#accordionGroupA"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> <div class="accordion__item"> <div class="accordion__header" data-toggle="accordion" data-target="#accordion-group-a-2" aria-expanded="true"> <h3>Accordion Header</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-group-a-2" class="accordion__body collapse show" data-parent="#accordionGroupA"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-group-a-3" aria-expanded="false"> <h3>Accordion Header</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-group-a-3" class="accordion__body collapse" data-parent="#accordionGroupA"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> </div>

<div class="accordion accordion--group" id="accordionGroupB"> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-group-b-1" aria-expanded="false"> <h3>Accordion Header</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-group-b-1" class="accordion__body collapse" data-parent="#accordionGroupB"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-group-b-2" aria-expanded="false"> <h3>Accordion Header</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-group-b-2" class="accordion__body collapse" data-parent="#accordionGroupB"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-group-b-3" aria-expanded="false"> <h3>Accordion Header</h3> <span class="accordion__header-arrow"></span> </div> <div id="accordion-group-b-3" class="accordion__body collapse" data-parent="#accordionGroupB"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> </div>

<div class="accordion accordion--group" id="accordionGroupC"> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-group-c-1" aria-expanded="false"> <h3>Accordion Header</h3> <small class="accordion__header-info">Estimated time</small> <span class="accordion__header-arrow"></span> </div> <div id="accordion-group-c-1" class="accordion__body collapse" data-parent="#accordionGroupC"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-group-c-2" aria-expanded="false"> <h3>Accordion Header</h3> <small class="accordion__header-info">Estimated time</small> <span class="accordion__header-arrow"></span> </div> <div id="accordion-group-c-2" class="accordion__body collapse" data-parent="#accordionGroupC"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> <div class="accordion__item"> <div class="accordion__header collapsed" data-toggle="accordion" data-target="#accordion-group-c-3" aria-expanded="false"> <h3>Accordion Header</h3> <small class="accordion__header-info">Estimated time</small> <span class="accordion__header-arrow"></span> </div> <div id="accordion-group-c-3" class="accordion__body collapse" data-parent="#accordionGroupC"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu varius quam, quis ullamcorper dui. Phasellus iaculis mattis sapien ut dignissim. Nulla consectetur, magna quis fermentum venenatis, velit metus ornare tellus, at imperdiet eros augue et magna.</p> </div> </div> </div>