CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gilbert e.
Gilbert e.

Reputation: 3

slide right to left div on hover jquery

Good day, I'm having trouble with jquery. i found a topic here that i want to learn using jquery slide right to left div http://jsfiddle.net/PXLJG/2/.

what i want to achieve is when hover, show hidden content on specific div. i tried adding .addClass('active'); to the script. here is the script i made 

 $(document).ready(function(){
        $('.holdingbox').hover(function(){
        var rightbox = $('.rightbox');
        if (rightbox.hasClass('active')){
            rightbox.stop().animate({width: '-0px'}, 1000).removeClass('active');
        } else {
            rightbox.stop().animate({width: '90px'}, 1000).addClass('active');
        }
        });
    });

The problem now is when i hover on one div, all div shows up.Please see attached image. Hope you guys can point me to right direction. thank you

Upvotes: 0

Views: 991

Answers (2)

Berk Ozturk
Berk Ozturk

Reputation: 61

Change code to this

You'll get children of the hovered element this way. Without using $(this) you target all '.rightbox' elements in document.

   $('.holdingbox').hover(function(){
    $(this).find('.rightbox').stop().animate({width: '90px'}, 1000)
}, function(){
    $(this).find('.rightbox').stop().animate({width: '-0'}, 1000)
});

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You need to target the rightbox element in current element context i.e. this

You can either use context or .find() to target child element.

$('.holdingbox').hover(function() {
   var rightbox = $('.rightbox', this); //$(this).find('.rightbox')
}); 


$(document).ready(function() {
   $('.holdingbox').hover(function() {
     var rightbox = $('.rightbox', this);
     if (rightbox.hasClass('active')) {
       rightbox.stop().animate({
         width: '-0px'
       }, 1000).removeClass('active');
     } else {
       rightbox.stop().animate({
         width: '90px'
       }, 1000).addClass('active');
     }
   });
 });
div {
  display: inline-block;
}

.holdingbox {
  position: relative;
  top: 0;
  margin-left: 100px;
}

.leftbox {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  font-size: 24px;
  background-color: #ac193d;
  color: #FFF;
  font-weight: bold;
  padding: 1px;
}

.rightbox {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 0;
  height: 30px;
  vertical-align: top;
  margin-right: 0;
}

.content {
  width: 100px;
  position: absolute;
  background-color: #ac193d;
  height: 29px;
  left: 0;
  top: 0;
  right: 0;
  color: #FFF;
  padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holdingbox">
  <span class="rightbox"><span class="content">Kenyér</span></span>
  <span class="leftbox">></span>
 </div>

<div class="holdingbox">
  <span class="rightbox">
  <span class="content">Kenyér</span>
  </span>
  <span class="leftbox">></span>
</div>

Upvotes: 3

Related Questions