I've been attempting to collapse multiple targets with just one click. The Bootstrap documentation suggests that this can be achieved by specifying a matching CSS selector with the data-target attribute. However, it seems that the collapsing only works on the first element that matches the selector. Here's a simple example:
<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d69786975786f5d2c332f3329">[email protected]</a>/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>
When I remove or change the "Centrifuge2-collapsible" class on the first collapsible div, then the second one becomes collapsible.
Is it possible for Bootstrap to collapse multiple elements at once? According to this answer, it should work. However, in this case, using multiple IDs also did not produce the desired result.