Accordion

Vertically collapsing accordions


Accordion Props

    
      acdnName: [string] - Accordion Name
      items: [array] - list of product literature card data
        - header: [string] - Value to show in the accordion header
          description: [string] - Definition description
    
  

Example

  	
  		<div class="accordion rbn-accordion" id="exampleAccordion">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acdn0" aria-expanded="true" aria-controls="acdn0">
          Item 1
        </button>
      </h2>
      <div id="acdn0" class="accordion-collapse collapse show" data-bs-parent="#exampleAccordion">
        <div class="accordion-body">
          Amet mattis vulputate enim nulla aliquet. In dictum non consectetur a erat nam at lectus. Massa id neque aliquam vestibulum morbi blandit cursus risus at. Etiam tempor orci eu lobortis. Tincidunt praesent semper feugiat nibh sed. Morbi tincidunt augue interdum velit euismod in pellentesque.
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdn1" aria-expanded="false" aria-controls="acdn1">
          Item 2
        </button>
      </h2>
      <div id="acdn1" class="accordion-collapse collapse" data-bs-parent="#exampleAccordion">
        <div class="accordion-body">
          Ac ut consequat semper viverra nam libero justo laoreet. Sit amet dictum sit amet justo donec enim. Hac habitasse platea dictumst vestibulum. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Euismod nisi porta lorem mollis aliquam ut porttitor leo a. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus.
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdn2" aria-expanded="false" aria-controls="acdn2">
          Item 3
        </button>
      </h2>
      <div id="acdn2" class="accordion-collapse collapse" data-bs-parent="#exampleAccordion">
        <div class="accordion-body">
          Ac odio tempor orci dapibus ultrices. Eu nisl nunc mi ipsum faucibus. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Mattis rhoncus urna neque viverra justo nec ultrices dui. Vitae tempus quam pellentesque nec.
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdn3" aria-expanded="false" aria-controls="acdn3">
          Item 4
        </button>
      </h2>
      <div id="acdn3" class="accordion-collapse collapse" data-bs-parent="#exampleAccordion">
        <div class="accordion-body">
          Dui sapien eget mi proin sed. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Consectetur adipiscing elit duis tristique sollicitudin nibh sit. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras.
        </div>
      </div>
    </div>
  </div>