Hello All,

Today, I am going to explain how to create bootstrap Accordion

Let’s start coding and follow the below steps.

We will need the jquery js script jquery-1.12.4.js. copy the jquery-1.12.4.js from the (https://code.jquery.com/jquery-1.12.4.js) and paste any location of your computer or you can copy the js file below URL.

We will also need the bootstrap js bootstrap.min.js copy the jquery-ui.js from the (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js) and paste any location of your computer.

We will also need the bootstrap css. copy the jquery-ui.css from the (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css) and paste any location of your computer.

We have completed all the pre-requirement step in achieving the objective.

We have used some HTML code.
<div class=”container demo”>
<div class=”panel-group” id=”accordion” role=”tablist” aria-multiselectable=”true”>
<div id=”image-list1″ class=”sortable-list”>
<div class=”panel panel-default” id=”a” questionId=”sddsdsds2″>
<div class=”panel-heading” role=”tab” id=”headingOne”>
<h4 class=”panel-title”>
<a role=”button” data-toggle=”collapse” data-parent=”#accordion” href=”#collapseOne” aria-expanded=”true” aria-controls=”collapseOne”>
<i class=”more-less glyphicon glyphicon-plus”></i>
First
</a>
</h4>
</div>
<div id=”collapseOne” class=”panel-collapse collapse” role=”tabpanel” aria-labelledby=”headingOne”>
<div class=”panel-body”>
Our technical and consulting competencies not just gets you from point A to point B but gives you the necessary drive to become the game changer with our ubiquitous suite of services in the field of top custom software development, platform-based consulting, web application development, mobility and IT services.
</div>
</div>
</div>
<div class=”panel panel-default” id=”b” questionId=”sddsdsds4″>
<div class=”panel-heading” role=”tab” id=”headingTwo”>
<h4 class=”panel-title”>
<a class=”collapsed” role=”button” data-toggle=”collapse” data-parent=”#accordion” href=”#collapseTwo” aria-expanded=”false” aria-controls=”collapseTwo”>
<i class=”more-less glyphicon glyphicon-plus”></i>
Second
</a>
</h4>
</div>
<div id=”collapseTwo” class=”panel-collapse collapse” role=”tabpanel” aria-labelledby=”headingTwo”>
<div class=”panel-body”>
We specialize in IT strategy & consulting, Idea sharing & collaboration and Product Design & Development. Our beliefs are simple and rooted. With our knowledge legacy, agile methodology and our ability to maximize our client’s potential, we are on a mission to transform the way digital products are built in the age of disruption.
</div>
</div>
</div>
<div class=”panel panel-default” id=”c” questionId=”sddsdsds1″>
<div class=”panel-heading” role=”tab” id=”headingThree”>
<h4 class=”panel-title”>
<a class=”collapsed” role=”button” data-toggle=”collapse” data-parent=”#accordion” href=”#collapseThree” aria-expanded=”false” aria-controls=”collapseThree”>
<i class=”more-less glyphicon glyphicon-plus”></i>
Third
</a>
</h4>
</div>
<div id=”collapseThree” class=”panel-collapse collapse” role=”tabpanel” aria-labelledby=”headingThree”>
<div class=”panel-body”>
Jellyfish Technologies offers frontend web development services for fast-growing tech companies. Join our frontend experts on board, you have all the needed skills & help and tools to make your product always unique.
</div>
</div>
</div>
</div><!– panel-group –>
</div>
</div>
I have followed this URL: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

Hope you will find this helpful.