Bootstrap 4 Accordion with Arrow up and Down

Bootstrap 4 Accordion with Arrow up and Down
Code Snippet:
Author:
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 17,024
License: MIT
Edit Code online: CodeHim
Read More

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: January 19, 2024
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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X