CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1432315
user1432315

Reputation: 117

JQuery Slide (this) element only

I am trying to get this working where if you hover on the div with the class of photo, the photo-info slides in for that div (not both). I think I need the 'this' in Jquery but I am a little lost. I don't want to have to give each div.photo a separate id. How can I amend my script?

                  <div class="photo">
                      <div class="photo-info"><p>Some information</p></div>                   
                  </div>
                  <div class="photo">
                      <div class="photo-info"><p>Some information</p></div>                   
                  </div>

.photo-info {display:none;}

<script>
$(document).ready(function() {

$(".photo").hover(function () {
    $(".photo-info").slideToggle("slow");
});

});
</script>

Upvotes: 0

Views: 50

Answers (4)

Kypros
Kypros

Reputation: 2986

You need to use this selector and find to make sure you are only accessing that element's children like here:

    $(".photo").hover(function () {
        $(this).find(".photo-info").slideToggle("slow");
    });

Check out this jsFiddle

Upvotes: 0

Luanf
Luanf

Reputation: 172

In order to do what you want you indeed will need to use the this but don't be scared. It is actually very straightforward. Take a look at this snippet:

    $(".photo").hover(function () {
    $(".photo-info").slideToggle("slow");
});

Just use this instead: 

$(this).children(".photo-info").slideToggle("slow");

And all problems solved. Hope this helps.

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

use this here you can get the children of that div

$(this).children(".photo-info").slideToggle("slow");

Upvotes: 1

Insyte
Insyte

Reputation: 2236

$(".photo").hover(function () {
    $(this).find(".photo-info").slideToggle("slow");
});

Upvotes: 0

Related Questions