WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Collapse


In this chapter we discuss of collapsible

Basic Collapsible

Collapsibles is used to hind or show large amount of content

Google LLC have online advertising technologies, search engine, cloud computing, software, and hardware.

Example

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Google LLC have online advertising technologies, search engine, cloud computing, software, and hardware...
</div>
Try it Yourself »

Example Explained

This .collapse class indicates a collapsible element (a <div> in our example); where you can change mode content shown or hidden with a click of a button.

you can change show/hide the collapsible content, by adding the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).

Example

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Try it Yourself »

By default, the collapsible content is hidden. However, you can add the .in class to show the content by default:

Example

<div id="demo" class="collapse in">
Google LLC have online advertising....
</div>
Try it Yourself »

Collapsible Panel

Put here Panel Body

The following example shows a collapsible panel:

Example

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h2>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Put here Panel Body</div>
      <div class="panel-footer">Put here Panel Footer</div>
    </div>
  </div>
</div>
Try it Yourself »

Collapsible List Group

  • First
  • Second
  • Third

The following shows a collapsible panel with a list group inside:

Example

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Second</li>
        <li class="list-group-item">Third </li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>
Try it Yourself »

Accordion

Google LLC have online advertising technologies, search engine, cloud computing, software, and hardware....
Google LLC have online advertising technologies, search engine, cloud computing, software, and hardware...
Google LLC have online advertising technologies, search engine, cloud computing, software, and hardware...

The below example shows a simple accordion by extending the panel component.

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="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      Google LLC have online advertising technologies,
      search engine, cloud computing, software, and hardware...
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Google LLC have online advertising technologies, search engine,
      cloud computing, software, and hardware...
     
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">oogle LLC have online advertising technologies, search engine,
      cloud computing, software, and hardware...
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
     software, and hardware.</div>
    </div>
  </div>
</div>
Try it Yourself »



Welookups is optimized for learning.Copy right 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.