CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapbootstrap-4
Wingo
Wingo

Reputation: 118

Bootstrap collapse data-target selector fails

I have been trying to collapse multiple targets on a single click. According to Bootstrap documentation, this can be achieved by specifying matching CSS selector with the data-target attribute. However, the collapse seems to work only at the first element matching to the selector. Minimal example here:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>
  <div class="device-icon-wrapper" data-toggle ="collapse" data-target=".Centrifuge2-collapsible">Collapse</div>
  <div class="col properties collapse Centrifuge2-collapsible">Properties</div>
  <div class="features Centrifuge2-collapsible collapse">Features</div>
</body>

If I remove or edit the class "Centrifuge2-collapsible" on the first collapsible div, the second div will become collapsible.

Can Bootstrap collapse target multiple elements? According to this answer, it should be possible. However, multiple IDs also failed in this case.

Upvotes: 0

Views: 787

Answers (2)

Wingo
Wingo

Reputation: 118

As pointed by Robert C, this was an issue of the 4.0.0 alpha version and was solved already in the beta version. Updating the Bootstrap version solved the problem.

Upvotes: 0

Renzo Calla
Renzo Calla

Reputation: 7696

why not wrapping all your items in one container...

<!doctype html>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


  <div class="device-icon-wrapper" data-toggle ="collapse" data-target=".Centrifuge2-collapsible">Collapse</div>
  <div class="Centrifuge2-collapsible collapse">
  <div class="col properties">Properties</div>
  <div class="features">Features</div>
  </div>

Upvotes: 0

Related Questions