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.
Similar Code Snippets:
JavaScript Code For Collapsible Content
jQuery Easy Accordion Plugin - monica.js
JavaScript Accordion with Smooth Transition
Accordion Sidebar Menu with CSS and jQuery
jQuery Responsive Vertical Tabs to Accordion
Accordion Expand Collapse Animation CSS
JavaScript Accordion with Arrow
Horizontal Accordion Slider for jQuery - liteAccordion
Modern Accordion in HTML CSS Only
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.