Toggle function needs more than one click
Hi,
I've made some JQuery code to learn how it works and I saw a strange behaviour with toggle function, here are the code that I wrote:
html:
-
<div id="apDiv1">
<input type="button" name="gauche" id="gauche" class="bouton" value="Gauche" />
<input type="button" name="milieu" id="milieu" class="bouton" value="Milieu" />
<input type="button" name="droite" id="droite" class="bouton" value="Droite" />
</div>
CSS:
-
.highlight {
font-weight: 200;
font-style: italics;
background-color: #2C652F ;
color:#FFFFFF;
}
#apDiv1 {
position:absolute;
left:1px;
top:9px;
width:229px;
height:25px;
z-index:1;
padding:0px;
}
and JQuery:
-
$(document).ready(function() {
$('.bouton').toggle(
function(){ $('.bouton').removeClass('highlight');
$(this).addClass('highlight');},
function(){$(this).removeClass('highlight');});
});
the behavior that I want is to change each button's style when clicked and no style for the other two,
BASICLY IT WORKS
but I noticed that when when a button is highlighted, a click on another buttons desn't do anything and I must to click again to see things working, it's like it does't triger the event
when I replace toggle function by hover, ot works perfectly
any suggestions? or it's a bug on the toggle function?
Regards