Reputation: 1079
I'm trying to have some text toggle on click of elements with same class. I have the text showing on click but when I click another element the text remains. How do I have it removed from others when another element of same class is clicked?
$('.video-carousel--thumbnail').on('click', function() {
$(this).find('.now-playing').not(this).css('display', 'none');
$(this).find('.now-playing').css('display', 'block');
});
.now-playing {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-carousel--thumbnail">
<div class="l-thumbnail__title">
<p><strong>Thumbnail One</strong></p>
<p class="now-playing"><strong>Now Playing</strong></p>
</div>
</div>
<div class="video-carousel--thumbnail">
<div class="l-thumbnail__title">
<p><strong>Thumbnail Two</strong></p>
<p class="now-playing"><strong>Now Playing</strong></p>
</div>
</div>
<div class="video-carousel--thumbnail">
<div class="l-thumbnail__title">
<p><strong>Thumbnail Three</strong></p>
<p class="now-playing"><strong>Now Playing</strong></p>
</div>
</div>
Upvotes: 0
Views: 646
Reputation: 337743
You don't need the DOM traversal logic when hiding all other elements. Just select them directly using $('.now-playing')
. Also note that you can use hide()
and show()
instead of css()
.
$('.video-carousel--thumbnail').on('click', function() {
$('.now-playing').hide()
$(this).find('.now-playing').show();
});
Also note that if you want to toggle the elements then your not()
selector is incorrect as this
refers to the .video-carousel--thumbnail
element which raised the event, not the .now-playing
element to exclude from the collection.
For that to work you need to find the relevant element first, then exclude it from those you remove the class from before calling toggle()
. Try this:
$('.video-carousel--thumbnail').on('click', function() {
var $target = $(this).find('.now-playing');
$('.now-playing').not($target).hide()
$target.toggle();
});
.now-playing {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-carousel--thumbnail">
<div class="l-thumbnail__title">
<p><strong>Thumbnail One</strong></p>
<p class="now-playing"><strong>Now Playing</strong></p>
</div>
</div>
<div class="video-carousel--thumbnail">
<div class="l-thumbnail__title">
<p><strong>Thumbnail Two</strong></p>
<p class="now-playing"><strong>Now Playing</strong></p>
</div>
</div>
<div class="video-carousel--thumbnail">
<div class="l-thumbnail__title">
<p><strong>Thumbnail Three</strong></p>
<p class="now-playing"><strong>Now Playing</strong></p>
</div>
</div>
Upvotes: 1