Collapse properties in Bootstrap

How to show and hide the text using collapse property in Bootstrap?

Collapse

It hides and shows the text

 <h2>Collapse</h2>
    <div class="container">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#techfunda">Click here to show</button>
        <div id="techfunda" class="collapse">
           TechFunda is a online tutorial to learn .NET in step by step manner 
        </div>
    </div>

In the above code snippet we have defined the collapse property, we have div class as container and button as btn danger , data-toggle as collapse and data target as #techfunda and we are having another div and we have given the id as techfunda and class as collapse

output

Panel collapse

It is used to create collapse in a panel

<h2>Panel collapse</h2>
    <div class="container"> 
        <div class="panel-group">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapse1">TechFunda</a>
                    </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <div class="panel-body">AngularJS</div>
                    <div class="panel-footer">ASP.NETMVC</div>
                </div>
            </div>
        </div>
    </div>

Panel collapse

In the above code snippet we have defined the panel collapse and creating in a panel group we are creating panel heading as link of techfunda to collapse the text in the techfunda , we have given #Collapse1 to call the function in the div to collapse the text in the techfunda as AngularJS and ASP.NETMVC

output

Collapse with list group

We can create list in the panel to collapse the lists using collapse property

  <h2>Collapse  with list group</h2>
    <div class="container">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapse1">Collapse</a>
                    </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li class="list-group-item">TechFunda</li>
                        <li class="list-group-item">Dotnetfunda</li>
                        <li class="list-group-item">ITFunda</li>
                    </ul>
                    <div class="panel-footer">Farmingfunda</div>
                </div>
            </div>
        </div>
    </div>

Collapse with list group

In the above code snippet we have defined the list in the panel to collapse the list, we have created unordered list using list group in the div section to define the list values

output

Accordion

Accordion is used by collapse property to collapse the text in the panel

 <div class="container">
        <h2>Accordion Example</h2>
        <div class="panel-group" id="accordion">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Dotnetfunda</a>
                    </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">
                    <div class="panel-body">
                       <ul>
                           <li>Articles</li>
                           <li>Forums</li>
                           <li>Codes</li>
                       </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">TechFunda</a>
                    </h4>
                </div>
                <div id="collapse2" class="panel-collapse collapse">
                    <div class="panel-body">
                      <ul>
                          <li>AngularJS</li>
                          <li>HTML5</li>
                          <li>Sqlserver</li>
                          <li>CSS3</li>
                      </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">ITFunda</a>
                    </h4>
                </div>
                <div id="collapse3" class="panel-collapse collapse">
                    <div class="panel-body">
                       <ul>
                           <li>Online training</li>
                           <li>Offline training</li>
                       </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

Accordion

In the above code snippet we have panel group with id as accordion, we created collapse by using three panels in the panel group, we used accordion and collapse property in the panel,