Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Collapse from Bootstrap site does not work

I am trying to learn collapsing with bootstrap and I copied the code directly from the site and it does not work when I paste it into my own html file. Can someone help me figure this out?

        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"     rel="stylesheet" integrity="sha384-    EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <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">
        Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>

Here is the JS FIDDLE
JS FIDDLE

I just copied some code. It works on their site but it does not work when I copy and paste the code. Am I missing something?

Tags:

2

Answers


  1. 0

    You need the bootstrap.bundle.min.js script too
    cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

    Login or Signup to reply.
  2. 0

    Try these links?

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>


<div class="card" style="width: 18rem;">
  <img src="https://picsum.photos/id/684/600/400" class="card-img-top" alt="">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search