CODEWITHSUNDEEP
jquery
Ben
Ben

Reputation: 13

Trigger an event only in the current div

I have multiple boxes with a "info" button in each that toggle a modal with a description but when i click on one button it triggers all the modals in the same time instead of showing only the one inside the current box. Anyone can help me figure it out?

here is my code:

$('.info-btn').click(function () {
  $('.modal').toggleClass('open');
});
.box{ color:#341f12; background-color: #EFEFEF;  padding:20px;  margin:20px }
.modal{opacity:0}
.open{opacity:1 !important}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
Josh...
<button class="info-btn">More info</button>
<div class="modal">modal 1</div>
</div>

<div class="box">
Luca...
<button class="info-btn">More info</button>
<div class="modal">modal 2</div>
</div>


<div class="box">
Kevin...
<button class="info-btn">More info</button>
<div class="modal">modal 3</div>
</div>

Upvotes: 1

Views: 50

Answers (2)

Nitheesh
Nitheesh

Reputation: 19986

Select the nextElementSibling of current target using e.currentTarget.nextElementSibling and toggle class using

$(e.currentTarget.nextElementSibling).toggleClass('open');

But this will work only if the .modal comes just next to button (I have put this commented in the solution)

OR

Select parent and find children with class modal with jQuery selector for the same will be

$(this).parent().children('.modal').toggleClass('open');

This will select the element with class modal under the same parent div.

$('.info-btn').click(function (e) {
  // $(e.currentTarget.nextElementSibling).toggleClass('open');
  $(this).parent().children('.modal').toggleClass('open');
});
.box {
  color: #341f12;
  background-color: #EFEFEF;
  padding: 20px;
  margin: 20px
}

.modal {
  opacity: 0
}

.open {
  opacity: 1 !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  Josh...
  <button class="info-btn">More info</button>
  <div class="modal">modal 1</div>
</div>

<div class="box">
  Luca...
  <button class="info-btn">More info</button>
  <div class="modal">modal 2</div>
</div>


<div class="box">
  Kevin...
  <button class="info-btn">More info</button>
  <div class="modal">modal 3</div>
</div>

Generic Solution.

  • Find the closest element with the class name of parent.
  • Find the child element with targeted class name.
  • Toggle its visibility

Working fiddle:

$('.info-btn').click(function (e) {
  $(this).closest('.box').children('.modal').toggleClass('open');
});
.box {
  color: #341f12;
  background-color: #EFEFEF;
  padding: 20px;
  margin: 20px
}

.modal, .modal1 {
  opacity: 0
}

.open {
  opacity: 1 !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  Im a simple div
  <button class="info-btn">More info</button>
  <div class="modal">modal 3</div>
</div>

<div class="box">
  Im contained inside another parent
  <button class="info-btn">More info</button>
  <div class="modal">modal 3</div>
</div>


<div class="box">
  I have a dive between `.modal` and `info-btn`
  <button class="info-btn">More info</button>
  <div class="modal1">modal 3</div>
  <div class="modal">modal 3</div>
</div>

Upvotes: 0

mplungjan
mplungjan

Reputation: 178069

Navigate to .next()

Alternative in case you want to move the modal:

$(this).closest('.box').find('.modal').toggleClass('open');

$('.info-btn').on('click', function() {
  $(this).next('.modal').toggleClass('open');
});
.box {
  color: #341f12;
  background-color: #EFEFEF;
  padding: 20px;
  margin: 20px
}

.modal {
  opacity: 0
}

.open {
  opacity: 1 !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  Josh...
  <button class="info-btn">More info</button>
  <div class="modal">modal 1</div>
</div>

<div class="box">
  Luca...
  <button class="info-btn">More info</button>
  <div class="modal">modal 2</div>
</div>


<div class="box">
  Kevin...
  <button class="info-btn">More info</button>
  <div class="modal">modal 3</div>
</div>

Without jQuery

document.getElementById('container').addEventListener('click', function(e) {
  const tgt = e.target;
  if (tgt.classList.contains('info-btn')) {
    tgt.closest('.box').querySelector('.modal').classList.toggle('open');
  }
});
.box {
  color: #341f12;
  background-color: #EFEFEF;
  padding: 20px;
  margin: 20px
}

.modal {
  opacity: 0
}

.open {
  opacity: 1 !important
}
<div id="container">
  <div class="box">
    Josh...
    <button class="info-btn">More info</button>
    <div class="modal">modal 1</div>
  </div>

  <div class="box">
    Luca...
    <button class="info-btn">More info</button>
    <div class="modal">modal 2</div>
  </div>


  <div class="box">
    Kevin...
    <button class="info-btn">More info</button>
    <div class="modal">modal 3</div>
  </div>
</div>

Upvotes: 1

Related Questions