J'ai besoin d'aide pour utiliser la fonction de bascule jQuery pour échanger le contenu de l'image et du contenu div

Question

J'ai besoin d'aide pour obtenir une image pour activer et désactiver les états activés et désactivés pour afficher/masquer. J'ai besoin de ceux-ci pour basculer en arrière quand on clique dessus. Des idées?

<a href="#" onclick="toggle();"><img src="/images/control.png" /></a> 

<div id="box1"> 
Showing first box content 
</div> 

<div id="box2" style="display:none;"> 
Show second box content when control image is clicked 
</div> 

Answer 1

J'utiliser le script discret pour cela si possible, comme ceci:

<a href="#" id="toggler"><img src="/images/control.png" /></a> 

Ensuite, vous pouvez le lier à basculer puis, comme ceci:

$(function() {      //run when the DOM is ready 
    $('#toggler').click(function() { //bind to the anchor click 
    $('#box1, #box2').toggle();  //toggle both, effectively swapping them 
    }); 
}); 

Answer 2

Détaillez ce que vous voulez faire avec l'image ... Je suppose que vous vouliez dire que vous voulez activer chaque div, en fonction du clic. Cela activera <div> pour qu'un seul soit affiché à la fois.

<a href="#" onclick="$('#box1').toggle();$('#box2').toggle();"><img src="/images/control.png" /></a> 

<div id="box1"> 
Showing first box content 
</div> 

<div id="box2" style="display:none;"> 
Show second box content when control image is clicked 
</div>