Notes
HTML
CSS
JS
Tools
Code Snippets
HTML Entity
About
Contact Us
Multiple Accordion Menu Using HTML and CSS (Bootstrap 3)
HTML
CSS
JS
Output
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple accordion menu using HTML and CSS (Bootstrap 3 )</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-12 col-md-6 col-md-offset-3"> <h1 class="mainHeading">Multiple accordion menu using HTML and CSS (Bootstrap 3 )</h1> <div> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default panelMain"> <div class="panel-heading panelHeadTab" role="tab" id="headingOne"> <h4 class="panelMain-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> faq question number 1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading panelHeadTab" role="tab" id="headingTwo"> <h4 class="panelMain-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> faq question number 2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading panelHeadTab" role="tab" id="headingThree"> <h4 class="panelMain-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> faq question number 3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading panelHeadTab" role="tab" id="headingFour"> <h4 class="panelMain-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> faq question number 4 </a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading panelHeadTab" role="tab" id="headingFive"> <h4 class="panelMain-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> faq question number 5 </a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </body> </html>
Copied
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple accordion menu using HTML and CSS (Bootstrap 3 )</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-12 col-md-6 col-md-offset-3"> <h1 class="mainHeading">Multiple accordion menu using HTML and CSS (Bootstrap 3 )</h1> <div> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default panelMain"> <div class="panel-heading panelHeadTab" role="tab" id="headingOne"> <h4 class="panelMain-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> faq question number 1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading panelHeadTab" role="tab" id="headingTwo"> <h4 class="panelMain-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> faq question number 2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading panelHeadTab" role="tab" id="headingThree"> <h4 class="panelMain-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> faq question number 3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading panelHeadTab" role="tab" id="headingFour"> <h4 class="panelMain-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> faq question number 4 </a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading panelHeadTab" role="tab" id="headingFive"> <h4 class="panelMain-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> faq question number 5 </a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </body> </html>
CSS
.mainHeading{ color: rgb(6,2,114); text-align: center; margin-bottom: 5rem; margin-bottom: 3rem; } .panelMain-title>a:before { float: right !important; font-family: FontAwesome; content: "\2212"; background: #001AFF; padding: 5px 15px 2px 15px; color: white; position: absolute; top: 50%; right: 10px; transform: translate(-10%, -50%); } .panelMain-title>a.collapsed:before { float: right !important; content: "\002B"; } .panelMain-title>a:hover, .panelMain-title>a:active, .panelMain-title>a:focus { text-decoration: none; } .panelHeadTab { padding: 10px 15px !important; border-bottom: 1px solid transparent; border-top-right-radius: 3px; border-top-left-radius: 3px; } .panelMain { margin-bottom: 20px !important; background-color: #ffffff; border: 1px solid transparent; } .jumbotron { padding-top: 30px; padding-bottom: 30px; margin-bottom: 30px; color: inherit; background-color: #00bcd4; text-align: center; color: #fff; } .panel-default>.panelHeadTab { background: white !important; filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25)); width: 100%; }
Copied
.mainHeading{ color: rgb(6,2,114); text-align: center; margin-bottom: 5rem; margin-bottom: 3rem; } .panelMain-title>a:before { float: right !important; font-family: FontAwesome; content: "\2212"; background: #001AFF; padding: 5px 15px 2px 15px; color: white; position: absolute; top: 50%; right: 10px; transform: translate(-10%, -50%); } .panelMain-title>a.collapsed:before { float: right !important; content: "\002B"; } .panelMain-title>a:hover, .panelMain-title>a:active, .panelMain-title>a:focus { text-decoration: none; } .panelHeadTab { padding: 10px 15px !important; border-bottom: 1px solid transparent; border-top-right-radius: 3px; border-top-left-radius: 3px; } .panelMain { margin-bottom: 20px !important; background-color: #ffffff; border: 1px solid transparent; } .jumbotron { padding-top: 30px; padding-bottom: 30px; margin-bottom: 30px; color: inherit; background-color: #00bcd4; text-align: center; color: #fff; } .panel-default>.panelHeadTab { background: white !important; filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25)); width: 100%; }
JS
Copied
Output
Our Courses
HTML 5
CSS
JavaScript
MySql
PHP
Laravel
Bootstrap
Programming Tutorial
PHP
JavaScript
HTML
Laravel
MySQL
JQuery
CSS
Git
Bootstrap
Vue JS
Android
Python
Server
Code Snippets
Chat Box
Range Slider
Radio Button
Select Box
Nav Bar
Other
Testimonial
Carousel
Logo
Loader
Lightbox
Forms
Popup
Table
HTML Course Code
HTML Entity
↑→ Arrows
$¢ Currency
Aö Letters
%+ Math
1¾ Numbers
&— Punctuation
©™ Symbols
Best Of
Internet
Technology
Health
Travel
Onine Tools
CSS Minifier
Text Converter
Age Calculator
Pincode Details
Whiteboard
PDF to Text
Gradient Generator
PX to REM Converter
REM to PX Converter
PX to EM Converter
EM to PX Converter
WEBP Converter
Latest & Upcoming movies
Bollywood
Hollywood
Tamil
Telgu
Bangla
Web Series
Notes
HTML
CSS
JS