Creating Twitter Bootstrapping Collapse in PHP

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


Similar Articles