Accordion

Step 1 - the Accordion

We'll use the accordion component to create folders.

Go to our Accordion Docs and copy the code for Basic Accordion. Then paste it into the Section: Accordion:

HTML



<!--Section: Accordion-->
<section class="mb-5">

  <!--Accordion wrapper-->
  <div class="md-accordion accordion" id="accordionEx" role="tablist" aria-multiselectable="true">

      <!-- Accordion card -->
      <div class="card">

          <!-- Card header -->
          <div class="card-header" role="tab" id="headingOne">
              <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  <h5 class="mb-0">
                      Collapsible Group Item #1
                      <i class="fa fa-angle-down rotate-icon"></i>
                  </h5>
              </a>
          </div>

          <!-- Card body -->
          <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
              <div class="card-body">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                  non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                  3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                  shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                  sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                  farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.
              </div>
          </div>
      </div>
      <!-- Accordion card -->

      <!-- Accordion card -->
      <div class="card">

          <!-- Card header -->
          <div class="card-header" role="tab" id="headingTwo">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  <h5 class="mb-0">
                      Collapsible Group Item #2
                      <i class="fa fa-angle-down rotate-icon"></i>
                  </h5>
              </a>
          </div>

          <!-- Card body -->
          <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="card-body">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                  non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                  3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                  shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                  sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                  farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.
              </div>
          </div>
      </div>
      <!-- Accordion card -->

      <!-- Accordion card -->
      <div class="card">

          <!-- Card header -->
          <div class="card-header" role="tab" id="headingThree">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  <h5 class="mb-0">
                      Collapsible Group Item #3
                      <i class="fa fa-angle-down rotate-icon"></i>
                  </h5>
              </a>
          </div>

          <!-- Card body -->
          <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
              <div class="card-body">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                  non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                  3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                  shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                  sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                  farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.
              </div>
          </div>
      </div>
      <!-- Accordion card -->
  </div>
  <!--/.Accordion wrapper-->

</section>
<!--Section: Accordion-->

As you can see, the accordion is built of cards. Each card contains a card-body with an ID and a card-header which refers to the ID of the card-body.

As always, each ID in each card has to be unique.

Step 2 - accordion customization

We'll use CSS to customize the accordion. To the style.css file add this code:



.accordion .card {
margin-bottom: 1.2rem;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.accordion .card .card-body {
border-top: 1px solid #eee;
}

It will split the accordion cards into separated panels and add a nice shadow to each card. After saving the file it should work as expected.

Step 3 - dropdowns

To provide additional options for each accordion card, we'll use the dropdown component. We'll add it to each card-header.

Replace the entire card-header (together with its contents) of the first accordion card, with the following code:

HTML



<!-- Card header -->
<div class="card-header" role="tab" id="headingOne">

    <!--Options-->
    <div class="dropdown pull-left">
        <button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <i class="fa fa-pencil"></i>
        </button>
        <div class="dropdown-menu dropdown-info">
            <a class="dropdown-item" href="#">Add new</a>
            <a class="dropdown-item" href="#">Rename folder</a>
            <a class="dropdown-item" href="#">Delete folder</a>
        </div>
    </div>

    <!-- Heading -->
    <a id="folder-1" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <h5 class="mt-1 mb-0">
            <span>Folder 1</span>
            <i class="fa fa-angle-down rotate-icon"></i>
        </h5>
    </a>

</div>

If you want to learn more about Dropdowns, have a look at Dropdown documentation.

Now you can replace 2 other card-headers. Remember to use unique IDs.

HTML



<!--Accordion wrapper-->
<div class="md-accordion accordion" id="accordionEx" role="tablist" aria-multiselectable="true">

  <!-- Accordion card -->
  <div class="card">

      <!-- Card header -->
      <div class="card-header" role="tab" id="headingOne">

          <!--Options-->
          <div class="dropdown pull-left">
              <button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                  aria-expanded="false">
                  <i class="fa fa-pencil"></i>
              </button>
              <div class="dropdown-menu dropdown-info">
                  <a class="dropdown-item" href="#">Add new</a>
                  <a class="dropdown-item" href="#">Rename folder</a>
                  <a class="dropdown-item" href="#">Delete folder</a>
              </div>
          </div>

          <!-- Heading -->
          <a id="folder-1" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <h5 class="mt-1 mb-0">
                  <span>Folder 1</span>
                  <i class="fa fa-angle-down rotate-icon"></i>
              </h5>
          </a>

      </div>

      <!-- Card body -->
      <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
          <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
              non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
              3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
              shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
              sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
              farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
              labore sustainable VHS.
          </div>
      </div>
  </div>
  <!-- Accordion card -->

  <!-- Accordion card -->
  <div class="card">

      <!-- Card header -->
      <div class="card-header" role="tab" id="headingTwo">

          <!--Options-->
          <div class="dropdown pull-left">
              <button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                  aria-expanded="false">
                  <i class="fa fa-pencil"></i>
              </button>
              <div class="dropdown-menu dropdown-info">
                  <a class="dropdown-item" href="#">Add new</a>
                  <a class="dropdown-item" href="#">Rename folder</a>
                  <a class="dropdown-item" href="#">Delete folder</a>
              </div>
          </div>

          <!-- Heading -->
          <a id="folder-2" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
              <h5 class="mt-1 mb-0">
                  <span>Folder 2</span>
                  <i class="fa fa-angle-down rotate-icon"></i>
              </h5>
          </a>

      </div>

      <!-- Card body -->
      <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
              non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
              3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
              shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
              sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
              farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
              labore sustainable VHS.
          </div>
      </div>
  </div>
  <!-- Accordion card -->

  <!-- Accordion card -->
  <div class="card">

      <!-- Card header -->
      <div class="card-header" role="tab" id="headingThree">

          <!--Options-->
          <div class="dropdown pull-left">
              <button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                  aria-expanded="false">
                  <i class="fa fa-pencil"></i>
              </button>
              <div class="dropdown-menu dropdown-info">
                  <a class="dropdown-item" href="#">Add new</a>
                  <a class="dropdown-item" href="#">Rename folder</a>
                  <a class="dropdown-item" href="#">Delete folder</a>
              </div>
          </div>

          <!-- Heading -->
          <a id="folder-3" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
              <h5 class="mt-1 mb-0">
                  <span>Folder 3</span>
                  <i class="fa fa-angle-down rotate-icon"></i>
              </h5>
          </a>
      </div>

      <!-- Card body -->
      <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
          <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
              non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
              3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
              shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
              sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
              farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
              labore sustainable VHS.
          </div>
      </div>
  </div>
  <!-- Accordion card -->
</div>
<!--/.Accordion wrapper-->

Rate this lesson

Previous lesson Live preview Next lesson