CODEWITHSUNDEEP
javascripthtmljquerytwitter-bootstrapbootstrap-4
Sean McCarthy
Sean McCarthy

Reputation: 5558

Bootstrap 4.6 Collapse Not Toggling (Opening or Closing)

See the following code snippet. My Bootstrap 4.6 collapse stuff is not opening when I click the button.

Oddly, when I run $("#30-50hp").collapse('show') in the JavaScript console, it does open, so why wouldn't the button do the same thing?

Here's the relevant documentation, which I've followed: https://getbootstrap.com/docs/4.6/components/collapse/

// The following makes it work!
// $("#30-50hp").collapse('show')
<!doctype html>
<html lang="en">

<head>
  <!-- Bootstrap v4.6 CSS-->
  <link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
  crossorigin="anonymous">
</head>

<body>
  <h4>Select Your Horsepower</h4>

  <p>
    <button 
      class="btn btn-secondary" 
      type="button" 
      data-toggle="collapse" 
      data-target="#30-50hp" 
      aria-expanded="false" 
      aria-controls="30-50hp">
      30-50 HP
    </button>
  </p>

  <div class="collapse" id="30-50hp">
    <div class="card card-body">
      <h4 class="card-title">30-50 HP Card Title</h4>
      <ul>
        <li>List item 1</li>
      </ul>
    </div>
  </div>

  <!-- JQuery 3.5.1 per Bootstrap 4.6 docs -->
  <script 
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
  crossorigin="anonymous"></script>
  
  <!-- Bootstrap v4.6 JavaScript -->
  <script 
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" 
crossorigin="anonymous"></script>

</body>

</html>

Upvotes: 0

Views: 676

Answers (1)

j08691
j08691

Reputation: 207861

Don't start IDs with a number:

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

  <h4>Select Your Horsepower</h4>

  <p>
    <button 
      class="btn btn-secondary" 
      type="button" 
      data-toggle="collapse" 
      data-target="#x30-50hp" 
      aria-expanded="false" 
      aria-controls="30-50hp">
      30-50 HP
    </button>
  </p>

  <div class="collapse" id="x30-50hp">
    <div class="card card-body">
      <h4 class="card-title">30-50 HP Card Title</h4>
      <ul>
        <li>List item 1</li>
      </ul>
    </div>
  </div>

  <!-- JQuery 3.5.1 per Bootstrap 4.6 docs -->
  <script 
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
  crossorigin="anonymous"></script>
  
  <!-- Bootstrap v4.6 JavaScript -->
  <script 
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" 
crossorigin="anonymous"></script>

Upvotes: 1

Related Questions