CODEWITHSUNDEEP
javascriptjquerytoggle
Leeroy Jenkins
Leeroy Jenkins

Reputation: 13

jQuery how to use toggle function to element in for loop

I'm using toggle function to 4 div's elements. I need to close prev div, when I click second. How can I do it?

$(document).ready(function() {
  var $this = $(document).find('.slider-div');
  var $thiz = $('.money-transf');

  $('.money-transf').click(function(e) {
    for (var i = 0; i < $this.length; i++) {
      // here i need to add toggle function to $this[i] elements;
    }
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
  <p>Element</p>
</div>
<div class='slider-div'>
  <p>Inform about element</p>
</div <div class='money-transf'>
<p>Element2</p>
</div>
<div class='slider-div'>
  <p>Inform about element2</p>
</div>

Upvotes: 1

Views: 359

Answers (3)

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

You can try following.

  • Hide all the slider-div`s at the beginning
  • In click function, hide all the slider-div's and then show the next corresponding slider-div element

$(document).ready(function(){
    var transfs = $('.money-transf');
    $('.slider-div').hide();
    transfs.click(function(e){
        $('.slider-div').hide();
        $(e.currentTarget).next('.slider-div').show();
    });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
    <p>Element</p>
</div>
<div class='slider-div'>
    <p>Inform about element</p>
</div>
<div class='money-transf'>
    <p>Element2</p>
</div>
<div class='slider-div'>
    <p>Inform about element2</p>
</div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337646

You don't need a loop for this. You simply need to call slideUp() on all other .slider-div elements before you toggle the one related to the clicked .money-transf, like this:

$(document).ready(function() {
  var $slider = $('.slider-div');
  var $transf = $('.money-transf');

  $transf.click(function(e) {
    var $target = $(this).next('.slider-div');
    $slider.not($target).slideUp();
    $target.slideToggle();
  });
})
.slider-div {
  display: none;
}

p {
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="money-transf">
  <p>Element</p>
</div>
<div class="slider-div">
  <p>Inform about element</p>
</div>
<div class="money-transf">
  <p>Element2</p>
</div>
<div class="slider-div">
  <p>Inform about element2</p>
</div>

Note that I changed the $this and $thiz variable names to something more meaningful and less easy to confuse.

Upvotes: 1

JIJOMON K.A
JIJOMON K.A

Reputation: 1280

Try this code

$("div").click(function(){
  $(this).prevAll().toggle(); // toggle all previous divs
   //$(this).prevAll().addClass('hide');  // hide all previous divs
});
.hide{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
    <p>Element</p>
</div>
<div class='slider-div '>
    <p>Inform about element</p>
</div>
<div class='money-transf '>
    <p>Element2</p>
</div>
<div class='slider-div '>
    <p>Inform about element2</p>
</div>

Upvotes: 0

Related Questions