each loop should only run once when button is clicked

Question

I want to hide a div when a button is clicked and then show the next div with the same class. I have tried using this code, but when I do this, the next div that I want shown also fades out.

 $('.arrow:last-of-type').on('click', function(){
        
        $( ".collaboration" ).each(function( index ) {
            
            if($('.collaboration').css('display') == 'block'){
                $(this).fadeOut()
                $(this).next().fadeIn()
  
            }

        })
    })

Is there a way to stop the each() from running when it is executed once and then run again when the click action happens?

Here's the HTML:

<div id="collaborations">
      <p class="arrow"><</p>
        <div class="collaboration">
            <img src="./img/test.png" />
            <p>Text</p>
            <a href="#" target="_blank"><button>Visit</button></a>
        </div>
        
        <div class="collaboration">
            <img src="./img/test.png" />
            <p>Text</p>
            <a href="#" target="_blank"><button>Visit</button></a>
        </div>

        <div class="collaboration">
             <img src="./img/test.png" />
             <p>Text</p>
             <a href="#" target="_blank"><button>Visit</button></a>
        </div>

        <p class="arrow">></p>
      </div>
    </div>  

Thanks

Answer 1

Solution

You could solve this by not iterating through the .collaboration s at all.

The key thing is that you need to keep track of which one is currently being shown. If you know that, then what your click handler can do is show the next one and hide the current one.

I would suggest doing that with a class .active on the same div as .collaboration . You can then select the next div by $('.active').next().addClass('.active') , and deselect by $('.active').removeClass('.active') .

You might need to store a reference to your first element before you select the next one

Example

Here's a quick example of how this might work: https://codepen.io/juancaicedo/pen/LYGgPWa

I moved around the html to group all the collaborations into a div by themselves.

Other approaches

You'll find that you have to think through some other behaviors with the solution above. For example, in my example, there is a moment when two items are on the screen, causing their container div to grow and later shrink.

For these reasons, I don't like handling presentation from within javascript (ie using jquery's fadeIn / fadeOut ).

If you can find a way to instead using only css, I think that's preferable. Here's an example using css transitions https://codepen.io/juancaicedo/pen/ZEQqzrR

Answer 2

The each method of jQuery can be stopped whenever you want by returning false inside of the callback, so you can probably fix your code by doing this:

$('.arrow:last-of-type').on('click', function(){

    $( ".collaboration" ).each(function( index ) {

        if($('.collaboration').css('display') == 'block'){
          $(this).fadeOut()
          $(this).next().fadeIn()
          return false;
        }

    });
});