Bootstrap 4 Accordion with Arrow up and Down

A very simple and lightweight Bootstrap 4 accordion with arrow up and down to toggle the contents. The plugin uses CSS transition and radio input (for accordion structure) to toggle contents. It uses a little bit jQuery for one accordion open at a time feature, however, it also working without jQuery.

Further, this accordion can be used to create FAQ, MCQs or any toggle contents. It is fully responsive and can be fully customize with additional CSS.

Plugin Overview

Plugin: CSS Accordion Tabs
Author: Sameer Kumar Choudhary
Licence: MIT Licence
Published: August 31, 2019
Repository: Fork on GitHub
Dependencies: Bootstrap 4.1.3 and jQuery 1.3.1 or Latest version (Optional)
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 4.37 KB

How to Create Bootstrap 4 Accordion with Arrow Up & Down

1. First of load Bootstrap framework and jQuery (JavaScript library) into your HTML document.

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Popper Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. After that, also include Accordion‘s CSS and JavaScript file into your web page/app.

<!-- Accordion CSS -->
<link rel="stylesheet" href="css/accordion.css">

<!-- Accordion JS -->
<script src="js/accordion.js"></script>

3. Now, create HTML structure (like below) for your accordion and add your contents in it.

<div class="container-fluid">
   <div class="accordion-started accordion-bral row">
      <div class="col-sm-12 col-md-12 col-lg-12">
         <p class="acco-heading text-justify text-center">Heading</p>
         <p class="acco-subheading text-justify text-center">Sub-Heading</p>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-12">
         <!-- accordion item start -->
         <input class="ac-input" id="ac-1"  name="accordion-1" type="radio" checked/>
         <label class="ac-label" for="ac-1">1. LABEL:<i></i></label>
         <div class="article ac-content">
            <p class="text-justify">Your Accordion Contents Goes Here... </p>
         </div>
      </div>
      <!-- accordion item 1 end -->
      <div class="col-sm-12 col-md-12 col-lg-12">
         <!-- accordion item 2 start -->
         <input class="ac-input" id="ac-2" name="accordion-1" type="radio"/>
         <label class="ac-label" for="ac-2">2. LABEL:<i></i></label>
         <div class="article ac-content">
            <p class="text-justify">Your Accordion Contents Goes Here... </p>
         </div>
      </div>
      <!-- accordion item 2 end -->
   </div>
</div>

Tip: You can add multiple accordions in <div class="container-fluid">, just copy & paste the HTML structure of first accordion.