Introduction
In this article I explain creation of a Twitter Bootstrapping Collapse in PHP. This is very simple. You can make a collapse using a Twitter bootstrap file. When you are creating a collapse with a Twitter bootstrap file then the "jquery.js" and "collaps.js" files are required and this file is located in "docs/assets/js". You can use this file very simply to create a collapse, popup, and dropdown etc. See this URL: http://twitter.github.com/. You can use that for downloading the Twitter Bootstrap file.
Example1
<html>
<head>
<title>Example of collapsible</title>
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseA">
Click me to exapand. Click me again to collapse.
</a>
</div>
<div id="collapseA" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Technology will now enable Facebook users to encode secret messages in the pictures they upload on the social networking website.The creator of the technology is Owen-Campbell. Moore - an Oxford University student and former Google intern.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseB">
Click me to exapand. Click me again to collapse.
</a>
</div>
<div id="collapseB" class="accordion-body collapse">
<div class="accordion-inner">
Technology will now enable Facebook users to encode secret messages in the pictures they upload on the social networking website.The creator of the technology is Owen-Campbell. Moore - an Oxford University student and former Google intern. .
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseC">
Click me to exapand. Click me again to collapse.
</a>
</div>
<div id="collapseC" class="accordion-body collapse">
<div class="accordion-inner">
Technology will now enable Facebook users to encode secret messages in the pictures they upload on the social networking website.The creator of the technology is Owen-Campbell. Moore - an Oxford University student and former Google intern.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>
Output
![colla3.jpg]()
Next,
![colla4.jpg]()
Next,
![colla5.jpg]()
Example2
Here I will create a simple collapse example. See:
<html>
<head>
<title>Simple collapse Example</title>
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Colla"><a href="#demo" data-toggle="collapse">Click me to expand and collapse.</a></div>
<div id="demo" class="collapse">
Technology will now enable Facebook users to encode secret messages in the pictures they upload on the social networking website.The creator of the technology is Owen-Campbell. Moore - an Oxford University student and former Google intern.
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>
Output
I will use the following code to enable the collapse with JS functions:
$(".collapse").collapse()