Poetry

Bootstrap collapse

In bootstrap collapse is used to hide the targeted data. Insert data-toggle = "collapse" and a data-target to the element to automatically assign control of a collapsible element.

Basic collapse

In this example collapse is used to hide data. A button is used for target the collapsible content.

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapsebutton">
  Click here
</button>
<div class="collapse" id="collapsebutton">
  <div class="card card-body">
  paragraph here...
  </div>
</div>

Output of above code

These are the tabs for the demo of collapse data using bootstrap frame work with simple and short code. Click here to see demo. If you want to stay update please subscribe to my site. Download the source code of all languages in webtags site...

Multiple collapse tabs

In this example more than tabs are used to collapse. Three button are targeted in this example to collapse data.

<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapsebutton1" role="button" aria-controls="multiCollapseExample1">Toggle first element</a>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapsebutton2" aria-controls="multiCollapsebutton2">Toggle second element</button>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-controls="multiCollapsebutton1 multiCollapsebutton2">Toggle both elements</button>
           
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapsebutton1">
      <div class="card card-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapsebutton2">
      <div class="card card-body">
      Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

Output of above code

Toggle para first

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion

<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading1">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse1" aria-controls="collapse1">
          Collapsible Group No.1
        </button>
      </h5>
    </div>

    <div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
      <div class="card-body">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading2">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse2"  aria-controls="collapse2">
          Collapsible Group No.2
        </button>
      </h5>
    </div>
    <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading3">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse3" aria-controls="collapse3">
          Collapsible Group No.3
        </button>
      </h5>
    </div>
    <div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

Output of above code

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.

Webtags

Bootstrap collapse

Basic collapse

Output of above code

Multiple collapse tabs

Output of above code

Accordion

Output of above code

Comment here

Get Inn Touch! Subscribe.

Webtags

Usefull Links

Courses

Contact

Categories

Latest Posts

New Courses

A great way to start

New Courses for you

Start your training