I have more than one element with the same class name, ideally they will be seven, so, on pageload they will be hidden and then I want to show the extra text when clicking on the anchor, but only for that very instance of the div, my jQuery code is currently removing hidden in all instances of the div, I am guessing the solution would be to add this somewhere. Thanks!
$(".show-more").click(function() {
return $(".extra-text").toggleClass("hidden");
});.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
<a href="#" class="show-more">Show more..</a>
</div>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
<a href="#" class="show-more">Show more..</a>
</div>You need to traverse the DOM to find the .extra-text element related to the one which raised the event.
To do this you can use the this keyword which will refer to the element that raised the click event. Try this:
$(".show-more").click(function() {
$(this).closest('div').find(".extra-text").toggleClass("hidden");
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加