CODEWITHSUNDEEP
jquery
Adam
Adam

Reputation: 1475

jQuery: select all elements except next

I have the following markup:

<!-- first marker -->
<div class="marker"></div>
<div class="tooltip">
    <p>My tooltip content"</p>
</div>

<!-- second marker -->
<div class="marker"></div>
<div class="tooltip">
    <p>My tooltip content"</p>
</div> 

<!-- repeating..... -->

and the following jQuery javascript:

$(document).ready(function() {

    $(".marker").hover(function(event){
        $('.tooltip').hide();
        $(this).next('.tooltip').slideDown('fast');
    });

});

How can I modify this script so that on hover all other open div.tooltips hide except for the next one? Currently it tries to hide all.

Upvotes: 2

Views: 1628

Answers (5)

Adam Rackis
Adam Rackis

Reputation: 83366

You can use the not function to omit a particular element

$(".marker").hover(function(event){
    var nextEl = $(this).next("div.tooltips");
    $('.tooltip').not(nextEl).hide();
    $(this).next('.tooltip').slideDown('fast');
});

EDIT

Also, you'll likely want to also pass a second function to hover so that things clean up when the hover ends:

$(".marker").hover(function(event){
    var nextEl = $(this).next("div.tooltips");
    $('.tooltip').not(nextEl).hide();
    $(this).next('.tooltip').slideDown('fast');
}, function() {
    $('.tooltip').hide();
});

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337627

The problem is because you are using hover with one function, which means it it attempting to show a tooltip on mouseover and mouseout. If you supply two functions, one showing, one hiding the tooltip, it works:

$(document).ready(function() {
    $(".marker").hover(function(event){
        $('.tooltip').hide();
        $(this).next('.tooltip').slideDown('fast');
    },
    function(event){
        $('.tooltip').slideUp('fast');
    });
});

Example fiddle

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Below code should do the trick,

$(document).ready(function() {

    $(".marker").hover(function(event){
        //$('.tooltip').hide();
        $(this).next('.tooltip').eq(0).slideDown('fast');
    }, function (event) {
        $('.tooltip').hide();
    });

});

Note: You need to implement the mouseleave function for proper show/hide tooltip

Upvotes: 1

trembon
trembon

Reputation: 768

Do you have so you can get it by an id or something else? cause there is the :not() selector in jQuery

http://api.jquery.com/not-selector/

Upvotes: 0

romainberger
romainberger

Reputation: 4558

I know there is a not() function to exclude some elements. I never used it but it must be what you're looking for.

Upvotes: 0

Related Questions