Javascript

Alternating between 2 states in jQuery toggle()

Oct 22, 2019

A jQuery code snippet to detect the alternance between the 2 states of an element (hidden or displayed in the case of toggle() )

In the following example, we alternate between 2 images (set as background-image), based on the iteration count.

var iteration=$(this).data('iteration')||1
	switch ( iteration) {
		case 1:
			$("#toggle-arrow").css({"background-image":"url('img/togglearrow2.png')"});
			break;
				
		case 2:
			$("#toggle-arrow").css({"background-image":"url('img/togglearrow.png')"});
			break;
	}
	
	iteration++;
	if (iteration>2) iteration=1
	$(this).data('iteration',iteration)
            
});

Here, the 1st iteration happens when toggle() is triggered the first time (displaying the element).

The 2nd iteration in toggle() hides the element

Javascript   Jquery