Bootstrap 4 Collapse Tutorial With Example

In Bootstrap 4 Collapse Tutorial With Example, you will learn how to use collapse in Bootstrap 4. You can easily add collapsible content with Bootstrap 4 .collapse classes. You can create your content collapsible by adding data-toggle=” collapse “ to either a hyperlink or a button. The button or link references the ID of the content to collapse.

Bootstrap 4 Collapse Tutorial With Example

Using Bootstrap 4 you can create collapsibles. Collapsible is useful when you want to hide and show a large amount of content. It uses JavaScript to show or hide the content when clicked on the element.

#1: Bootstrap 4 Collapse

Using Bootstrap 4 .collapse class on a <div> container, you create a container that can collapse or appear again when the specified button is clicked.

To control (show/hide) the collapsible content, add the data-toggle=”collapse” attribute to a <button> or <a> element. Then add the data-target=”#id” attribute to connect the button with the collapsible content.

For <a> elements, you can use a href attribute instead of the data-target attribute.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Collapse Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
  <h2>Collapse</h2>
  <br>
    <button class="btn btn-primary" data-target="#data" data-toggle="collapse">Click me</button>
    <div class="collapse" id="data">
      Hello InvestmentNovel
    </div>
    <br>
    <p><a data-toggle="collapse" href="#investmentnovel" aria-expanded="false">InvestmentNovel</a></p>
    <div class="collapse" id="investmentnovel">
      <p>Latest Code Tutorial Blog.</p>
    </div>
</div>
</body>
</html>

The example of Bootstrap collapse will look like below screenshot.

Bootstrap 4 collapse example

By default, the collapsible content is hidden, you can add the .show class to show the content by default.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Collapse Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
  <h2>Show Collapse </h2>
  <br>
    <button class="btn btn-primary" data-target="#data" data-toggle="collapse">Click me</button>
    <div id="data" class="collapse show">
      Hello InvestmentNovel
    </div>
    <br>
    <p><a data-toggle="collapse" href="#investmentnovel" aria-expanded="false">InvestmentNovel</a></p>
    <div id="investmentnovel" class="collapse show">
      <p>Latest Code Tutorial Blog.</p>
    </div>
</div>
</body>
</html>

The example of Bootstrap show collapse will look like below screenshot.

Bootstrap 4 collapse tutorial

#2: Bootstrap 4 Collapse Accordion

The collapsibles of Bootstrap 4 allow us to create the component that is referred to as an accordion in web design. Accordions are popular for content such as FAQs, product overviews, etc. The accordion we will create example has multiple collapsible cards, only one of which is shown at a time. The card is displayed or hidden when the appropriate button is clicked, as well as being hidden when another card of the accordion is displayed.

Use the data-parent attribute to compose sure that all collapsible elements under the specified parent will be closed when one of the collapsible items is shown.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Collapse Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<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">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Hello InvestmentNovel
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
           Hello InvestmentNovel
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
           Hello InvestmentNovel
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

The example of Bootstrap collapse accordion will look like below screenshot.

Bootstrap 4 collapse accordion example

At last, our Bootstrap 4 CollapseTutorial With Example is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.