Below is the HTML code snippet:
<div class="row header collapse">
Content 1
<i class="fas fa-chevron-circle-up" ></i>
</div>
<div class="instructions-container">
<div></div>
<div></div>
</div>
<div class="row header collapse">
Content 2
<i class="fas fa-chevron-circle-up" ></i>
</div>
<div class="instructions-container">
<div></div>
<div></div>
</div>
We have multiple instances of this layout on a single page. When a .collapse element is clicked, only the corresponding .instructions-container directly below should slideToggle.
Additionally, we want to rotate the clicked .fa-chevron-cirle-up icon by 180 degrees upon click, but only for that specific instance.
Here's the jQuery script currently being used:
$(document).ready(function () {
$('.collapse').click(function () {
$(this).find('.instructions-container').slideToggle();
});
});