Jackson Jackson - 7 months ago 69
Javascript Question

jQuery: hide by class name and then show next element by the same class name?

I'm trying to create a demonstration type of thing in my page.

basically the first element is showing on the page load and the rest are hidden.

once the close button inside the element has been clicked, I need this showing element to hide and the next element with the same class name to show and the same process until there is no more element in the

next()
to show.

my html looks like this:

<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>

<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>



<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>

<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>


And my jquery looks like this:

$('.cls').click(function() {
$('.bubs').hide();
$(".bubs").next().show();
});


My simple code will hide
.bubs
that is showing but it doesn't show the next
.bubs


Could someone please advise on this issue?

Thanks in advance.

Answer

.bubs are not siblings. Go to ancestor a and then find .bubs in next a like following.

$('.cls').click(function () {
    $(this).closest('.bubs').hide();
    $(this).closest('a').next('a').find('.bubs').show();
});
Comments