Collapse in Bootstrap

The Bootstrap collapse is a plugin of javaScript used to hide content of our website.it mangae size accourding to our requirement. We can apply animation on the collapse by using CSS media quires.It is very easy to use.

.collapse , use to hide the content.

.collapsing, apply while transition on the page.

.collapsing, use to show the content.

  <!DOCTYPE html>
    <p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample100" role="button" aria-expanded="false" aria-controls="collapseExample100">
     By using Link 
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample100" aria-expanded="false" aria-controls="collapseExample100">
    By using Data Target
  </button>
</p>
<div class="collapse" id="collapseExample100">
  <div class="card card-body">
    Just follow codes family to learn programming and new technologies by experts of industory . You will enjoy programming while learning we can assure our viwers. Our viwers are our first priority so always we try to provide quality materials.
  </div>
</div>

Multiple targets.

By using button or href in both cases we can show or hide multiple elements at a time by using jquery selectors inside href or data-target attribute. We can add indicators to the slides with controls.

  <!DOCTYPE html>
     <p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample100" role="button" aria-expanded="false" aria-controls="multiCollapseExample100"> first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample200" aria-expanded="false" aria-controls="multiCollapseExample200">second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 00multiCollapseExample200"> both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample100">
      <div class="card card-body">
        Just follow codes family to learn programming and new technologies by experts of industory . You will enjoy programming while learning we can assure our viwers. Our viwers are our first priority so always we try to provide quality materials.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample200">
      <div class="card card-body">
        Just follow codes family to learn programming and new technologies by experts of industory . You will enjoy programming while learning we can assure our viwers. Our viwers are our first priority so always we try to provide quality materials.
      </div>
    </div>
  </div>
</div>

Accordion example

We can cards as well inside collapsing and change the behaviour of collapsing as a accordion.We use .accordion to make collapsing behaviour as a accordion.

  <!DOCTYPE html>
    <div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          CollapseItem-1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Just follow codes family to learn programming and new technologies by experts of industory . You will enjoy programming while learning we can assure our viwers. Our viwers are our first priority so always we try to provide quality materials.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
            Collapse Item-2
        </button>
      </h2>
    </div>
    <div id="collapseFour" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Just follow codes family to learn programming and new technologies by experts of industory . You will enjoy programming while learning we can assure our viwers. Our viwers are our first priority so always we try to provide quality materials.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
          Collapse Item-3
        </button>
      </h2>
    </div>
    <div id="collapseSix" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Just follow codes family to learn programming and new technologies by experts of industory . You will enjoy programming while learning we can assure our viwers. Our viwers are our first priority so always we try to provide quality materials.
      </div>
    </div>
  </div>
</div>

Collapse in Bootstrap

Collapse in Bootstrap

Multiple targets.

Accordion example

More Topics