Use same jQuery function in multiple instances

Question

I have this function and it needs to work in 54 different buttons on a page, what am I missing to make it work ONLY in the corresponding FLIP?

$(document).ready(function() {
  $(".flip").mouseenter(function() {
    $(".panel").slideDown("medium");
  });
});
$(document).ready(function() {
  $(".main").mouseleave(function() {
    $(".panel").slideUp("fast");
  });
});

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  width: 300px;
  display: block;
}

.panel {
  padding: 50px 5px;
  display: none;
}

.main {
  float: left;
  margin: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="flip">This is FLIP 1</div>
  <div class="panel">This is the son of FLIP 1</div>
</div>

<div class="main">
  <div class="flip">This is FLIP 2</div>
  <div class="panel">This is the son of FLIP 2</div>
</div>

Zakaria Acharki · Accepted Answer · 2017-02-22T17:37:12.650

You could use $(this) object and siblings() method like :

$(document).ready(function(){
  $(".flip").mouseenter(function(){
    $(this).siblings(".panel").slideDown("medium");
  });

  $(".flip").mouseleave(function(){
    $(this).siblings(".panel").slideUp("fast");
  });
});

NOTE : No need for two ready function just one is enough.

Hope this helps.

Snippet using mouseenter/mouseleave :

$(document).ready(function(){
  $(".flip").mouseenter(function(){
    $(this).siblings(".panel").slideDown("medium");
  });
  $(".flip").mouseleave(function(){
    $(this).siblings(".panel").slideUp("fast");
  });
});

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  width: 300px;
  display: block;
}

.panel {
  padding: 50px 5px;
  display: none;
}

.main {
  float: left;
  margin: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="flip">This is FLIP 1</div>
  <div class="panel">This is the son of FLIP 1</div>
</div>

<div class="main">
  <div class="flip">This is FLIP 2</div>
  <div class="panel">This is the son of FLIP 2</div>
</div>

Snippet using hover :

$(document).ready(function(){
  $( ".flip" ).hover(function() {
      $(this).siblings(".panel").slideDown("medium");
  }, function() {
      $(this).siblings(".panel").slideUp("fast");
  });
});

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  width: 300px;
  display: block;
}

.panel {
  padding: 50px 5px;
  display: none;
}

.main {
  float: left;
  margin: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="flip">This is FLIP 1</div>
  <div class="panel">This is the son of FLIP 1</div>
</div>

<div class="main">
  <div class="flip">This is FLIP 2</div>
  <div class="panel">This is the son of FLIP 2</div>
</div>

Thanks a lot! Works like a charm! I used the "mouseenter/mouseleave" snippet with a little twist, since I needed to be able to enter the "panel", so I used mouselave to work on "main" div: `code`$(document).ready(function(){ $(".flip").mouseenter(function(){ $(this).siblings(".panel").slideDown("medium"); }); $(".main").mouseleave(function(){ $(".panel").slideUp("fast"); }); });`code` — DoctorDiseno, Feb 22 '17 at 17:56
Accepted mark was removed from this post is there any problem in the provided answer? — Zakaria Acharki, Feb 22 '17 at 21:30

score 0 · Answer 2 · answered Feb 22 '17 at 17:36

0

You can use jQuery next to find the corresponding panel:

$(".flip").mouseenter(function(){
    $(this).next('.panel').slideDown("medium");
});

answered Feb 22 '17 at 17:36

cristiancastrodc

188
1
13

score 0 · Answer 3 · answered Feb 22 '17 at 17:36

0

Replace $(".panel") with $(this).siblings('.panel'). When you do $(".panel") then you are targeting all the .panel elements on your page and not just the one you want to work with.

answered Feb 22 '17 at 17:36

mehulmpt

15,861
12
48
88

Use same jQuery function in multiple instances

3 Answers3