Accordion

Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.

Accordion simple

Collapsible Group Item #1

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit. 

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
        <div class="accordion-title" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <h5 class="mb-0"> Collapsible Group Item #1</h5>
        </div>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        .....
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
        <div class="accordion-title collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <h5 class="mb-0"> Collapsible Group Item #2</h5>
        </div>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        .....
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
        <div class="accordion-title collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <h5 class="mb-0"> Collapsible Group Item #3</h5>
        </div>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        .....
      </div>
    </div>
  </div>
</div>

Accordion outline

Collapsible Group Item #1

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit. 

<div class="accordion accordion-outline" id="accordionExample-01">
  <div class="card">
    <div class="card-header" id="headingOne-01">
        <div class="accordion-title" data-toggle="collapse" data-target="#collapseOne-01" aria-expanded="true" aria-controls="collapseOne-01">	
          <h5 class="mb-0"> Collapsible Group Item #1</h5>
        </div>
    </div>
    <div id="collapseOne-01" class="collapse show" aria-labelledby="headingOne-01" data-parent="#accordionExample-01">
      <div class="card-body">
        ....
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo-01">
        <div class="accordion-title collapsed" data-toggle="collapse" data-target="#collapseTwo-01" aria-expanded="false" aria-controls="collapseTwo-01">
          <h5 class="mb-0"> Collapsible Group Item #2</h5>
        </div>
    </div>
    <div id="collapseTwo-01" class="collapse" aria-labelledby="headingTwo-01" data-parent="#accordionExample-01">
      <div class="card-body">
        ....
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree-01">
        <div class="accordion-title collapsed" data-toggle="collapse" data-target="#collapseThree-01" aria-expanded="false" aria-controls="collapseThree-01">
          <h5 class="mb-0"> Collapsible Group Item #3</h5>
        </div>
    </div>
    <div id="collapseThree-01" class="collapse" aria-labelledby="headingThree-01" data-parent="#accordionExample-01">
      <div class="card-body">
        ....
      </div>
    </div>
  </div>
</div>

Accordion background

Collapsible Group Item #1

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit. 

<div class="accordion accordion-background" id="accordionExample-02">
  <div class="card">
    <div class="card-header" id="headingOne-02">
        <div class="accordion-title" data-toggle="collapse" data-target="#collapseOne-02" aria-expanded="true" aria-controls="collapseOne-02">	
          <h5 class="mb-0"> Collapsible Group Item #1</h5>
        </div>
    </div>
    <div id="collapseOne-02" class="collapse show" aria-labelledby="headingOne-02" data-parent="#accordionExample-02">
      <div class="card-body">
        ....
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo-02">
        <div class="accordion-title collapsed" data-toggle="collapse" data-target="#collapseTwo-02" aria-expanded="false" aria-controls="collapseTwo-02">
          <h5 class="mb-0"> Collapsible Group Item #2</h5>
        </div>
    </div>
    <div id="collapseTwo-02" class="collapse" aria-labelledby="headingTwo-02" data-parent="#accordionExample-02">
      <div class="card-body">
        ....
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree-02">
        <div class="accordion-title collapsed" data-toggle="collapse" data-target="#collapseThree-02" aria-expanded="false" aria-controls="collapseThree-02">
          <h5 class="mb-0"> Collapsible Group Item #3</h5>
        </div>
    </div>
    <div id="collapseThree-02" class="collapse" aria-labelledby="headingThree-02" data-parent="#accordionExample-02">
      <div class="card-body">
        ....
      </div>
    </div>
  </div>
</div>

Accordion Box

Collapsible Group Item #1

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consectetur lorem ipsum dolor sit amet, adipisicing elit. Dolorum qui, facilis saepe. Repudiandae, animi, perferendis!

Blanditiis explicabo facilis ducimus, ipsam quasi quisquam, perspiciatis ea dolore rerum adipisci asperiores voluptatibus provident non quas. lorem ipsum dolor sit amet, consectetur adipisicing elit. 

<div class="accordion accordion-box" id="accordionExample-03">
  <div class="card">
    <div class="card-header" id="headingOne-03">
        <div class="accordion-title" data-toggle="collapse" data-target="#collapseOne-03" aria-expanded="true" aria-controls="collapseOne-03">	
          <h5 class="mb-0"> Collapsible Group Item #1</h5>
        </div>
    </div>
    <div id="collapseOne-03" class="collapse show" aria-labelledby="headingOne-03" data-parent="#accordionExample-03">
      <div class="card-body">
        ....
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo-03">
        <div class="accordion-title collapsed" data-toggle="collapse" data-target="#collapseTwo-03" aria-expanded="false" aria-controls="collapseTwo-03">
          <h5 class="mb-0"> Collapsible Group Item #2</h5>
        </div>
    </div>
    <div id="collapseTwo-03" class="collapse" aria-labelledby="headingTwo-03" data-parent="#accordionExample-03">
      <div class="card-body">
         ....
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree-03">
        <div class="accordion-title collapsed" data-toggle="collapse" data-target="#collapseThree-03" aria-expanded="false" aria-controls="collapseThree-03">
          <h5 class="mb-0"> Collapsible Group Item #3</h5>
        </div>
    </div>
    <div id="collapseThree-03" class="collapse" aria-labelledby="headingThree-03" data-parent="#accordionExample-03">
      <div class="card-body">
         ....
      </div>
    </div>
  </div>
</div>