Author: Michal Szymanski
Free live lesson
Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.
JOIN NOWStep 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:
<!--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="fas 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="fas 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="fas 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:
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne">
<!--Options-->
<div class="dropdown float-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="fas fa-pencil-alt"></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="fas 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.
<!--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 float-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="fas fa-pencil-alt"></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="fas 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 float-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="fas fa-pencil-alt"></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="fas 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 float-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="fas fa-pencil-alt"></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="fas 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 Live preview Next lesson
Spread the word:
