Accordion

Accordions are used to hide and show additional content. This allows the user to quickly scan topics and expand to see more details.

    
      <div id="exampleAccordion" class="accordion atp-accordion">
    <div class="atp-accordion-item">
      <h2 id="exampleOneHeading" class="h4 mb-0">
        <button class="accordion-trigger collapsed" type="button" data-toggle="collapse" data-target="#exampleOne" aria-expanded="false" aria-controls="exampleOne">Accordion Item Heading</button>
      </h2>
  
      <div id="exampleOne" class="accordion-collapse collapse" aria-labelledby="exampleOneHeading" data-parent="#exampleAccordion">
        <div class="accordion-content">
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
          <p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.</p>
        </div>
      </div>
    </div>
    <div class="atp-accordion-item">
      <h2 id="exampleTwoHeading" class="h4 mb-0">
        <button class="accordion-trigger" type="button" data-toggle="collapse" data-target="#exampleTwo" aria-expanded="true" aria-controls="exampleTwo">Accordion Item Heading 2</button>
      </h2>
  
      <div id="exampleTwo" class="accordion-collapse collapse show" aria-labelledby="exampleTwoHeading" data-parent="#exampleAccordion">
        <div class="accordion-content">
          <p>Eveniet tenetur, saepe, similique at molestiae distinctio esse itaque nulla nam nemo commodi, totam velit vitae officiis, quaerat enim eaque optio ad id sint quidem iste laudantium. Dolorem, voluptatum, sequi.</p>
        </div>
      </div>
    </div>
    <div class="atp-accordion-item">
      <h2 id="exampleThreeHeading" class="h4 mb-0">
        <button class="accordion-trigger collapsed" type="button" data-toggle="collapse" data-target="#exampleThree" aria-expanded="false" aria-controls="exampleThree">Accordion Item Heading 3</button>
      </h2>
  
      <div id="exampleThree" class="accordion-collapse collapse" aria-labelledby="exampleThreeHeading" data-parent="#exampleAccordion">
        <div class="accordion-content">
          <p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.</p>
        </div>
      </div>
    </div>
  </div>
    
  

    
      <div class="accordion atp-accordion">
    <div class="atp-accordion-item">
      <h2 id="exampleOneHeading" class="h4 mb-0">
        <button class="accordion-trigger collapsed" type="button" data-toggle="collapse" data-target="#exampleOne" aria-expanded="false" aria-controls="exampleOne">Accordion Item Heading</button>
      </h2>
  
      <div id="exampleOne" class="accordion-collapse collapse" aria-labelledby="exampleOneHeading">
        <div class="accordion-content">
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
          <p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.</p>
        </div>
      </div>
    </div>
    <div class="atp-accordion-item">
      <h2 id="exampleTwoHeading" class="h4 mb-0">
        <button class="accordion-trigger" type="button" data-toggle="collapse" data-target="#exampleTwo" aria-expanded="true" aria-controls="exampleTwo">Accordion Item Heading 2</button>
      </h2>
  
      <div id="exampleTwo" class="accordion-collapse collapse show" aria-labelledby="exampleTwoHeading">
        <div class="accordion-content">
          <p>Eveniet tenetur, saepe, similique at molestiae distinctio esse itaque nulla nam nemo commodi, totam velit vitae officiis, quaerat enim eaque optio ad id sint quidem iste laudantium. Dolorem, voluptatum, sequi.</p>
        </div>
      </div>
    </div>
    <div class="atp-accordion-item">
      <h2 id="exampleThreeHeading" class="h4 mb-0">
        <button class="accordion-trigger collapsed" type="button" data-toggle="collapse" data-target="#exampleThree" aria-expanded="false" aria-controls="exampleThree">Accordion Item Heading 3</button>
      </h2>
  
      <div id="exampleThree" class="accordion-collapse collapse" aria-labelledby="exampleThreeHeading">
        <div class="accordion-content">
          <p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.</p>
        </div>
      </div>
    </div>
  </div>