Admin dashboard – lesson 9


Step 1 - accordion

We'll use accordion component to create folders.

Go to Accordion documentation and copy the code of Basic Accordion. Then paste it to the Section: Accordion:


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

  <!--Accordion wrapper-->
  <div class="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-->

A can see, the accordion is built of cards. Each card contains card-body with an ID and card-header which refers to the ID of 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 accordion cards into the 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 dropdown component. We'll add it within each card-header.

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


<!-- 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 others card-headers. Remember to use unique IDs.


<!--Accordion wrapper-->
<div class="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-->

Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits