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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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 sommented in the solution)

OR

Select parent and find children with class modal with jQuey 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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>