jQuery how to use toggle function to element in for loop

Question

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>

Rory McCrossan · Accepted Answer · 2019-01-09 10:43:23Z

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.

JIJOMON K.A · Accepted Answer · 2019-01-09 10:43:20Z

0

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>

answered Jan 9, 2019 at 10:43

JIJOMON K.A

1,2903 gold badges13 silver badges29 bronze badges

1 Comment

Rory McCrossan Over a year ago

Please take the time to describe what the issues are and why this solution helps. Remember, we're here to educate people, not just dump code on them.

Nikhil Aggarwal · Accepted Answer · 2019-01-09 10:46:39Z

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>

Collectives™ on Stack Overflow

jQuery how to use toggle function to element in for loop

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related