Bootstrap

Bootstrap Collapse

by Saadinfo

✅ Example: Collapsible Blog Content

html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Bootstrap Collapse Blog</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
<div class="container mt-5">

  <h2>Blog Title</h2>

  <p>This is the introduction of the blog post. It gives a quick summary of what's to come.</p>
  <!-- Collapse Trigger Button -->

  <p>

    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseBlogContent" role="button" aria-expanded="false" aria-controls="collapseBlogContent">

      Read More

    </a>

  </p>
  <!-- Collapsible Content -->

  <div class="collapse" id="collapseBlogContent">

    <div class="card card-body">

      <p>

        This is the full content of the blog post. You can include text, images, code snippets, or anything else.

      </p>

      <p>

        Add more paragraphs, links, or other Bootstrap components here to flesh out your article.

      </p>

    </div>

  </div>

</div>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

Key Points:

data-bs-toggle="collapse": Triggers the collapsible element.
href="#collapseBlogContent": Links to the collapsible div.
<div class="collapse" id="collapseBlogContent">: The target of the toggle.
bootstrap.bundle.min.js includes necessary JS (including Popper) for collapse to work.

Leave a Reply Cancel reply