CODEWITHSUNDEEP
javascriptjqueryhtmlcss
HiD3f
HiD3f

Reputation: 49

jQuery hover animation on only one element out of similar others

I'm new to Js and jQuery, and I managed to set up a width change animation on a div when I hover on an other. But when I put 3 similar groups of divs, a hover on one, triggers the action on all the others. I tried to put some "this" and "next()" but it just stopped working altogether. Can you enlighten me please. Thank you

Here is the code.

https://jsfiddle.net/HiD3f/LmbaL1qo/2/

<html>
   <div class="mapHideBtn collapsed"></div>
   <div class="searchBlock hidden"></div>

   <div class="mapHideBtn collapsed"></div>
   <div class="searchBlock hidden"></div>

   <div class="mapHideBtn collapsed"></div>
   <div class="searchBlock hidden"></div>
</html>

<style>
  .searchBlock {
     display : inline-block;
     height: 50px;
     background : red;  
  }
  .hidden {
     width: 0; 
     transition : width 0.4s ease-in
  }
  .shown {
     width: 300px;
     transition : width 0.4s ease-in
  }
  .mapHideBtn {
     display : inline-block;
     width: 50px;
     height: 50px;
     background : green;
  }
</style>

<script>
  $('.mapHideBtn').hover(function(){
  if ($(this).hasClass("collapsed")) {
    $('.searchBlock').removeClass("hidden").addClass("shown");
    $('.mapHideBtn').removeClass("collapsed").addClass("expanded");
  } 

  else {
   $('.searchBlock').removeClass("shown").addClass("hidden");
   $('.mapHideBtn').removeClass("expanded").addClass("collapsed");
  };
});

Upvotes: 2

Views: 75

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can use $(this).next() and toggleClass() DEMO

$('.mapHideBtn').hover(function(){
  $(this).next().toggleClass('shown');
});

Update: If you want red bar to stay open when you hover over it, you can use this pure CSS approach DEMO or place .searchBlock inside .mapHideBtn DEMO

Upvotes: 6

Nalipu
Nalipu

Reputation: 66

Solution is simple:

<script>
    $('.mapHideBtn').hover(function(){
    if ($(this).hasClass("collapsed")) {
        $(this).next().removeClass("hidden").addClass("shown");
        $('.mapHideBtn').removeClass("collapsed").addClass("expanded");
    } 

    else {
        $('.searchBlock').removeClass("shown").addClass("hidden");
        $('.mapHideBtn').removeClass("expanded").addClass("collapsed");
    }
});
</script>

Upvotes: 0

Frits
Frits

Reputation: 7614

You need to change your jQuery selectors to $(this) and $(this).next().

What you are experiencing is a type of loop that finds ALL of the selectors you marked and runs the rules on them.

Here's a fixed fiddle for you: https://jsfiddle.net/LmbaL1qo/5/

And here is the code:

$('.mapHideBtn').hover(function() {
  if ($(this).hasClass("collapsed")) {
    $(this).next().removeClass("hidden").addClass("shown");
    $(this).removeClass("collapsed").addClass("expanded");
  } else {
    $(this).next.removeClass("shown").addClass("hidden");
    $(this).removeClass("expanded").addClass("collapsed");
  };
});

Upvotes: 0

Related Questions