Expand or collapse accordion panel using Bootstrap
Expand or collapse accordion panel using Bootstrap
As we know that Bootstrap is most powerful framework to design responsive website using css and jquery so in this article we learn about accordion panel .Using accordion panel we can design multi level div that div we can expand and collapse according our requirement
Source Code:-
<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">
<title>Expand or collapse accordion panel using Bootstrap-Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></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="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">What is Bootstrap?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>Bootstrap is most powerful framework to design responsive website using css and jquery </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">What is CSS?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. </p>
</div
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is Jquery?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Out-Put:-
LIVE DEMO
Bootstrap is most powerful framework to design responsive website using css and jquery
CSS stands for Cascading Style Sheet. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML
Expand or collapse accordion panel using Bootstrap
Reviewed by NEERAJ SRIVASTAVA
on
12:27:00 AM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
12:27:00 AM
Rating:
No comments: