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-22 17:37:12Z

1

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>

edited Feb 22, 2017 at 17:37

answered Feb 22, 2017 at 17:35

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DoctorDiseno Over a year ago

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

Zakaria Acharki Over a year ago

Accepted mark was removed from this post is there any problem in the provided answer?

cristiancastrodc · Accepted Answer · 2017-02-22 17:36:25Z

0

You can use jQuery next to find the corresponding panel:

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

answered Feb 22, 2017 at 17:36

cristiancastrodc

1563 silver badges13 bronze badges

Comments

mehulmpt · Accepted Answer · 2017-02-22 17:36:45Z

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, 2017 at 17:36

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

Collectives™ on Stack Overflow

Use same jQuery function in multiple instances

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related