Target a specific data-target button when using several Bootstrap collapse elements?

user_1295059 0
Viewed 623

Im using several bootstrap collapse elements on my website. The Collapse elements are controlled with read-more buttons, that have an icon in them that changes depending of the state of the collapse element. I achieve that by adding a class to the button. The problem is that the class is added to all the buttons. How do I add the class to only the specific collapse element button?

Here is the code:

<div class="collapse extra-text" id="collapse1">
                                <p class="">Hidden text</p>
                              
</div>
<p>
  <a class="read-more" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample">Read more </a>
</p>

The js im using:

 <script>
    $('.extra-text').on('hidden.bs.collapse', function () {
     $('.read-more').removeClass('active');
    
    });
    $('.extra-text').on('shown.bs.collapse', function () {
           $('.read-more').addClass('active');
    });
   </script>

And the css:

a.read-more:after {

    font-family: "Font Awesome 5 Free";
    content: "\f078";
    display: inline-block;
    transition: all 0.5s;
}


a.read-more.active:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}
bootstrap-5 twitter-bootstrap jquery javascript
1 Answers

You can use .prev() and .find() method to access previous element from collapse div and then add/remove class there.

Demo Code:

$('.extra-text').on('hidden.bs.collapse', function(e) {
  //get prev elements > p tag and then use .find to get readmore tag
  $(this).prev().find('a.read-more').removeClass('active');
});
$('.extra-text').on('shown.bs.collapse', function(e) {
  $(this).prev().find('a.read-more').addClass('active');
});
a.read-more::after {
  font-family: "Font Awesome 5 Free";
  content: "\f078";
  display: inline-block;
  transition: all 0.5s;
  font-weight: 900;
}

a.read-more.active:after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>

<p>
  <a class="read-more" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample">Read more </a>
</p>
<div class="collapse extra-text" id="collapse1">
  <p class="">Hidden text</p>

</div>

<p>
  <a class="read-more" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapseExample">Read more </a>
</p>
<div class="collapse extra-text" id="collapse2">
  <p class="">Hidden text</p>

</div>

user_106064000
Related