I have multiple divs on my webpage with the same class name. When i click on span (+/-) each div with the same class name get show/ hide. I want to show/ hide only sibling divs on click to +/- button. I tried a lot to find solution but could not reach to my solution. Thanks...
HTML:
<div class="abc">
<div class="abc1">
Stallone Manor is a 200 ft x 130 ft covered AC hall enchanted with a classic touch of Roman grandeur & grace. We offer one of the largest banquet halls in the city.<span>(-)</span>
</div>
<div class="abc2">
Stallone Manor is a 200 ft x 130 ft covered AC hall enchanted with a classic touch<span>(+)</span>
</div>
</div>
<div class="abc">
<div class="abc1">
Stallone Manor is a 200 ft x 130 ft covered AC hall enchanted with a classic touch of Roman grandeur & grace. We offer one of the largest banquet halls in the city.<span>(-)</span>
</div>
<div class="abc2">
Stallone Manor is a 200 ft x 130 ft covered AC hall enchanted with a classic touch<span>(+)</span>
</div>
</div>
Jquery:
$(document).ready(function() {
$(".abc2 span").click(function(){
$(".abc2").hide();
$(".abc1").show();
});
$(".abc1 span").click(function(){
$(".abc1").hide();
$(".abc2").show();
});
});
Fiddle:
You have to target the elements by using
this
,DEMO
You could optimize the solution like below,
DEMO