Home >>Bootstrap Tutorial >Bootstrap Collapse

Bootstrap Collapse

Bootstrap Collapse is used to show or hide the large amount of contents or data to your page.

It provides a button called toggle. Toggle button is used to show or hide the element. It requires Data-toggle=”collapse” and data-target attribute for collapsing the element.

Toggle using Button

You can collapse content by using button. Button requires attribute data-toggle="collapse" and data-target for collapsing element.

Let's take an example of bootstrap collapse:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Collapsible</h2>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">click me to see the effect</button>
  <div id="demo" class="collapse">
   Bootstrap collapse is used to hide or show the large amounts of contents. you have to use the data-toggle or data-target attribute.
  </div>
</div>
</body>
</html>

Output:

Collapsible

Bootstrap collapse is used to hide or show the large amounts of contents. you have to use the data-toggle or data-target attribute.

toggle using anchor tag <a> Links

You can also collapse element using anchor tag, but instead of using the data-target attribute you can use href for collapsing the element.

Let's take an example of collapse using anchor tag <a> element:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Collapsible</h2>
  <p>click the button to see the effect.</p>
  <a href="#demo1" class="btn btn-primary" data-toggle="collapse">click me </a>
  <div id="demo1" class="collapse">
Bootstrap collapse is used to hide or show the large amounts of contents. you have to use the data-toggle or href attribute.
  </div>
</div>
</div>
</body>
</html>

Output:

Collapsible

click the button to see the effect.

click me

Bootstrap collapse is used to hide or show the large amounts of contents. you have to use the data-toggle or href attribute.

Toggle Multiple targets

If you want you can also use multiple target by using button or anchor tag <a> element for hide or show the elements. For this, you need to require the data-target or href (for anchor tag element).

Let's take an example of toggle multiple targets:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <p>
  <a class="btn btn-success" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle 1</a>
  <button class="btn btn-success" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle 2</button>
  <button class="btn btn-success" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle 1 & 2</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero ultrices, dignissim dui id, feugiat nulla. Suspendisse ac urna orci. Nunc tempus urna eget nisi interdum, vel vestibulum purus maximus. Praesent feugiat neque enim, eu fermentum tortor rhoncus nec. Aenean risus massa, pharetra vitae interdum sit amet, vulputate eget quam.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero ultrices, dignissim dui id, feugiat nulla. Suspendisse ac urna orci. Nunc tempus urna eget nisi interdum, vel vestibulum purus maximus. Praesent feugiat neque enim, eu fermentum tortor rhoncus nec. Aenean risus massa, pharetra vitae interdum sit amet, vulputate eget quam.
      </div>
    </div>
  </div>
</div>
</div>
</body>
</html>

Output:

Toggle 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero ultrices, dignissim dui id, feugiat nulla. Suspendisse ac urna orci. Nunc tempus urna eget nisi interdum, vel vestibulum purus maximus. Praesent feugiat neque enim, eu fermentum tortor rhoncus nec. Aenean risus massa, pharetra vitae interdum sit amet, vulputate eget quam.

Accordion

Accordion in bootstrap is also used to collapse the element by using the data-target attribute. Use the data parent attribute which include all the child parent (Collapsible element), when one of the collapsible item is displayed other will be closed.

Let's take an example of Accordion:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Accordion</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Accordion</h2>
  <div id="accordion">
    <div class="card">
      <div class="card-header ">
        <a class="card-link" data-toggle="collapse" href="#collapseOne"> Accordion 1</a>
      </div>
      <div id="collapseOne" class="collapse show" 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.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Accordion 2</a>
      </div>
      <div id="collapseTwo" class="collapse" 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.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Accordion 3</a>
      </div>
      <div id="collapseThree" class="collapse" 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.
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output:

Accordion

Accordion 1

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.

Accordion 2

Accordion 3

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads