Would you like to create an accordion with arrow up/down buttons? In this tutorial, you will learn how to create Bootstrap Accordion with Arrow Up/Down. You will also learn how to style the accordion color scheme using CSS.
Creating an accordion with arrow up/down buttons is a great way to make your content more engaging and professional. Accordions are a great way to showcase important content on your website. They are easy to set up and are a great way to organize your content. Plus, they look great!
The collapse accordion plugin is clickable that expands the content area when they are triggered. The trigger functionality work as a toggle. When the user clicks on a specific element it will show and hide the content.
How to Create Bootstrap Accordion with Arrow
This Collapse Bootstrap develops while keeping the user experience in mind. The first item always opens so the user can read the content inside the accordion as they land on the website. The rest of the accordion items stay close to save the web page space.
Similarly, when a user clicks on the second item from the accordion the first item automatically closes to enhance the user experience. Moreover, the color scheme looks very good and we apply different color schemes for the open and closed items.
1. Load the Bootstrap framework and jQuery library into your Bootstrap web project.
<!-- jQuery -->
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<!-- Popper JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script>
<!-- Bootstrap JS -->
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
2. To add the icons, we will use fontawesome and also load the bootstrap framework CSS file.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
3. Now the important part that is the HTML structure will look like the one below. You can replace your own content inside the card-body div.
<div id="main">
<div class="container">
<div class="accordion" id="faq">
<div class="card">
<div class="card-header" id="faqhead1"> <a href="#" class="btn btn-header-link" data-toggle="collapse" data-target="#faq1"
aria-expanded="true" aria-controls="faq1">Collaboration</a> </div>
<div id="faq1" class="collapse show" aria-labelledby="faqhead1" data-parent="#faq">
<div class="card-body">Your Accordion Content will be here.</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqhead2"> <a href="#" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq2"
aria-expanded="true" aria-controls="faq2">Collaboration</a> </div>
<div id="faq2" class="collapse" aria-labelledby="faqhead2" data-parent="#faq">
<div class="card-body"> This is second accordion item </div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqhead3"> <a href="#" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq3"
aria-expanded="true" aria-controls="faq3">Presentations</a> </div>
<div id="faq3" class="collapse" aria-labelledby="faqhead3" data-parent="#faq">
<div class="card-body"> You can add more accordion by copy and past the card div html</div>
</div>
</div>
</div>
</div>
</div>
4. After that, we will apply some custom styles for collapsing accordions so we have different colors for opening and closing status.
#main {
margin: 50px 0;
}
#main #faq .card {
margin-bottom: 30px;
border: 0;
}
#main #faq .card .card-header {
border: 0;
-webkit-box-shadow: 0 0 20px 0 rgba(213, 213, 213, 0.5);
box-shadow: 0 0 20px 0 rgba(213, 213, 213, 0.5);
border-radius: 2px;
padding: 0;
}
#main #faq .card .card-header .btn-header-link {
color: #fff;
display: block;
text-align: left;
background: #FFE472;
color: #222;
padding: 20px;
}
#main #faq .card .card-header .btn-header-link:after {
content: "\f107";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
float: right;
}
#main #faq .card .card-header .btn-header-link.collapsed {
background: #A541BB;
color: #fff;
}
#main #faq .card .card-header .btn-header-link.collapsed:after {
content: "\f106";
}
#main #faq .card .collapsing {
background: #FFE472;
line-height: 30px;
}
#main #faq .card .collapse {
border: 0;
}
#main #faq .card .collapse.show {
background: #FFE472;
line-height: 30px;
color: #222;
}
Conclusion
In the end, you will have a beautiful, functional accordion with arrow up/down buttons. Your visitors will be impressed with your attention to detail and your professional website.