<style>
.disNone{display:none;}
.disBlock{display:block;}
</style>
<script>
$(".visitlink.item span").click(function(){
$(".summary.item").toggleClass("disNone");
$(".fullsum.item").toggleClass("disBlock");
});
</script>
<div class="wrapper">
<div class="coursebox">
<div class="summary item">summary</div>
<div class="fullsum item">fullsum</div>
<div class="visitlink item"><span>Readmore</span></div>
</div>
<div class="coursebox">
<div class="summary item">summary</div>
<div class="fullsum item">fullsum</div>
<div class="visitlink item"><span>Readmore</span></div>
</div>
</div>
How can I apply class on click div
it is working on both div
how can I write the code to target this.
Working Demo
$(".visitlink.item span").click(function() { $(this).closest(".coursebox").find(".summary.item").toggleClass("disNone"); $(this).closest(".coursebox").find(".fullsum.item").toggleClass("disBlock"); });
.disNone { display: none; } .disBlock { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="coursebox"> <div class="summary item">summary</div> <div class="fullsum item">fullsum</div> <div class="visitlink item"><span>Readmore</span> </div> </div> <div class="coursebox"> <div class="summary item">summary</div> <div class="fullsum item">fullsum</div> <div class="visitlink item"><span>Readmore</span> </div> </div> </div>
You can change to
$(this).parent().siblings(".summary.item").toggleClass("disNone");
$(this).parent().siblings(".fullSum.item").toggleClass("disBlock");
As the clicked element is span element and the target elements are the siblings of it's parent div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.