Bootstrap Collapse, Basic Collapse, Accordion Collapse, Accordion Menu, Bootsrap Collapse Menu, Bootstrap Accordion Menu, Show Data onclick, Hide content onclick, Show Hide Content in HTML CSS

Bootstrap Collapse

Bootstrap collapse are very useful element in web design. Collapse are use to hide and show your data of your content. Before we have to write long CSS to hide and show content but now with Bootstrap its become very simple and easy.

Basic Collapse

In Basic Collapse you can hide and show your data by using Bootstrap class .collapse. First of all you have to use a button or simple link to show and hide data and use data-toggle="collapse" and set data target id like data-target="#showdata"

Example:- 

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#showdata">Basic collapsible</button>
    <div id="showdata" class="collapse">
    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.
  </div>

In this example .collapse class indicate collapsible content. and data-toggle="collapse" used to control content, and data-target="#showdata" id to connet the button to show or hide collapsible content.

By default all collapsible content will be hidden. if you want to show your content on default then you have to add .collapse show class.

Accordion Collapse or Accordion Menu

Being a web designer most of time we need accordion collapse. Follow the example.

Example:- 

<div id="accordion">

  <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        Collapsible Item-1
      </a>
    </div>
    <div id="collapseOne" class="collapse show">
      <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.
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        Collapsible Item-2
      </a>
    </div>
    <div id="collapseTwo" class="collapse">
      <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.
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
        Collapsible Item-3
      </a>
    </div>
    <div id="collapseThree" class="collapse">
      <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.
      </div>
    </div>
  </div>

</div>