CODEWITHSUNDEEP
javascriptjqueryhtml
Jordyn
Jordyn

Reputation: 1133

Slide in from left hidden div inside a parent div (multiple div’s with same class)

So, I have multiple div’s with multiple hidden divs. I want to display each of this div is on a link hover.

My issue is that code seems to display and hide all hidden div’s at ones. I want only to display the hidden div inside the parent of link that trigged the hover.

Seems a bit bad explanation so let me put it this way. Lets say there are 10 div’s and someone hover the link inside div 1 I want only to display the hidden div inside div no 1.

Here is my code.

<div class="col-md-3 col-sm-6 posts">
  <div class="div-hidden"> 

    <!-- hidden content here --> 

  </div>
  <span class="thumbnail text-center"> <img src="imge" alt="">
  <h3>Titile</h3>
  <h4>Description</h4>
  <hr class="line">
  <div class="row">
    <div class="col-md-6 col-sm-6"> <a href="" class="fa fa-heart-o"></a> </div>
    <div class="col-md-6 col-sm-6"> <a href="" class="fa fa-eye show-hidden"></a> </div>
  </div>
  </span> </div>

<Script>        
   $(function() {
    $('.div-hidden').hide();
    $('.show-hidden').hover(function() {

    $('.div-hidden').show("slide", { direction: "left" }, 400); 

    });

    $('.show-hidden').mouseout(function() { 

    $('.div-hidden').hide("slide", { direction: "left" }, 400); 

    });

});     
</script>

Also i tried using $(this) in the the code which made the code stop working. 

$(this).('.div-hidden').show("slide", { direction: "left" }, 400);

Appreciate your time and input.

Upvotes: 0

Views: 110

Answers (3)

Mohd Amir
Mohd Amir

Reputation: 107

$(this).parents('.posts').find('.div-hidden').show();

Upvotes: 0

Arrabidas92
Arrabidas92

Reputation: 1153

First why when you hover all div's are hidden at once ? I suppose that each div have the same identifier .div-hidden. When you select this class you always select all the divs with this class attributed. Why don't you identify each of your div with a unique identifier with an id and then hide/show them on hover ? The parent of link that trigged the hover has a unique identifier to query with a CSS selector ?

Upvotes: 1

Talha Abrar
Talha Abrar

Reputation: 882

You can use this

$(this).closest('div.posts')
        .find('.div-hidden').show("slide", { direction: "left" }, 400);

OR

$(this).parent().parent().
        .parent().parent()
         .find('.div-hidden').show("slide", { direction: "left" }, 400);

Upvotes: 1

Related Questions