Multiple bootstrap collapses and jquery/javascript efficiency in toggling a display

Question

I often use a caret icon to show if a collapse in Bootstrap 5 is open or closed.

For example, I'll have some html like this:

<h4 class="border" role="button" data-bs-toggle="collapse" href="#plinks">
  <i id="plinks-closed" class="fa fa-caret-right"></i> 
  <i id="plinks-open" style="display:none;" class="fa fa-caret-down"></i> 
  Plinks
</h4>   

and some js like this to switch out the caret icon when the collapse is opened or closed:

$('#plinks').on('show.bs.collapse', function () {
  $( "#plinks-closed").hide();
  $( "#plinks-open").show();
});
$('#plinks').on('hide.bs.collapse', function () {
  $( "#plinks-closed").show();
  $( "#plinks-open").hide();
});

Sometimes I have a lot of these and I use a lot of different IDs and js sections to make them work, and all those js sections for each ID seems kind of messy and inefficient.

What I'm looking for is a more universal non-id specific way to take the right-caret and swap it out for the left-caret in an element that I assign.caret-collapse. It would automatically populate the "closed caret" upon load then automatically swap that out for the "open caret" when the collapse is opened.

I'm imagining the html would look something like:

<h4 class="border caret-collapse" role="button" data-bs-toggle="collapse" href="#plinks">
  <span class="caret-collapse-container"></span>
  Plinks
</h4> 

As for the js, I'm guessing it would check for the click on the.caret_collapse and then do some kind of "child" lookup for the.caret-collapse-container and add/remove the icon code, but I've had no luck making something like that happen and thought I'd ask here instead of getting more frustrated.

Answer 1

You're making it much too complicated. For one thing, avoid IDs in CSS and JS whenever possible. They don't allow reusability. For another, you can just target classes for toggle from the collapse element.

This demo isn't working, possibly due to faulty markup, but it gives you the idea.

 $('[data-bs-toggle="collapse"]').on('show.bs.collapse hide.bs.collapse', function() { $(this).find('i').toggleClass('fa-caret-right fa-caret-left'); });

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <h4 class="border" role="button" data-bs-toggle="collapse" href="#plinks"> <i class="fa fa-caret-right"></i> Plinks </h4> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>