Bootstrap Collapse - Explain Bootstrap's collapsing elements



Bootstrap Collapse

  • Collapsible content, add the data-bs-toggle="collapse" attribute to an <a> or a <button> element.
  • Click the buttons below to show and hide another element via class changes:
    • .collapse hides content.
    • .collapsing is applied during transitions.
    • .collapse.show shows content.
how-to-create-collapse-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <p>
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
      </a>
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-bs-target
      </button>
    </p>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
       Now let’s see the example consider “www.wikitechy.com” is a website, which contains thousands of different pages, including this web page which you are reading now.
      </div>
    </div>
  </body>
</html>

Output

bootstrap-collapse

Bootstrap Collapse Horizontal

  • Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <p>
      <button class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
        Toggle width collapse
      </button>
    </p>
    <div style="min-height: 120px;">
      <div class="collapse-horizontal collapse" id="collapseWidthExample" style="">
        <div class="card card-body" style="width: 300px;">
            Now let’s see the example consider “www.wikitechy.com” is a website, which contains thousands of different pages, including this web page which you are reading now.
        </div>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-collapse-horizontal

Bootstrap Collapse Multiple targets

  • A <button> or <a> can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute. Multiple <button> or <a> can show and hide an element if they each reference it with their href or data-bs-target attribute

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <p>
      <a class="btn btn-primary collapsed" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
      <button class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
      <button class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
    </p>
    <div class="row">
      <div class="col">
        <div class="multi-collapse collapse" id="multiCollapseExample1" style="">
          <div class="card card-body">
            Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
          </div>
        </div>
      </div>
      <div class="col">
        <div class="multi-collapse collapse" id="multiCollapseExample2" style="">
          <div class="card card-body">
            Now let’s see the example consider “www.wikitechy.com” is a website, which contains thousands of different pages, including this web page which you are reading now.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Output

bootstrap-collapse-multiple-targets

Related Searches to Bootstrap Collapse - Explain Bootstrap's collapsing elements