My goal is to expand and collapse the slider div only for the box where the user clicks. I have achieved this functionality, but a problem arises when I click "read more" - all the boxes expand, which is not the desired behavior. I want only the specific box to expand while the rest remain collapsed.
Below is the code snippet of what I am currently implementing:
<style>
#readmore1 {display: none;}
#readmore2 {display: none;}
#readmore3 {display: none;}
</style>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-md-4 testSliderBox">
<!-- Content here -->
</div>
<div class="col-md-4 testSliderBox">
<!-- Content here -->
</div>
<div class="col-md-4 testSliderBox">
<!-- Content here -->
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Slide 2">
</div>
</div>
<!-- Controls -->
</div>
<script>
// JavaScript functions for handling read more functionality
</script>
Currently, all boxes expand when clicking "readmore." My goal is for only the selected box to expand without affecting the others. I welcome any suggestions or feedback on what may be going wrong in my implementation.