Currently, when I click the first button, both hidden divs are showing. I want it so that when I click the first button, only the hidden div in its group is shown. Similarly, when I click the second button, only the hidden div in its group is shown.
Can someone assist me in achieving this?
$(document).ready(function () {
$(".btn").on("click", function () {
$(this).siblings(".hidden").toggleClass("active");
});
$(".closed").on("click", function (){
$(this).closest(".hidden").removeClass("active")
})
}).btn {
background: blue;
color: #ffffff;
font-weight: 600;
padding: 20px;
}
.hidden {
width: 100px;
height: 100px;
background: yellow;
display: none;
}
.hidden.active {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="con">
<div class="btn">Show</div>
<div class="hidden">
<div class="closed">Click to hide</div>
</div>
</div>
</div>
<br>
<div class="container">
<div class="con">
<div class="btn">Show</div>
<div class="hidden">
<div class="closed">Click to hide</div>
</div>
</div>
</div>