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()