Help with toggle - hiding and showing alternative?
-
<script type="text/javascript">
$(function(){
var num = 0;
$('#thebutton').click(function(e){
if(num % 2 == 0)
$('ul li:has(img[id=vstar])').toggle();
else
$('ul li:has(img[id=flower])').toggle();
num++;
});
});
</script>
Above is my JS. What I want to do is, click the button and have the vstar image hidden. Then when I click on the button again, the vstar appears, but now the flower is hidden. And clicking the button again, the vstar is hidden and the flower appears again, and so on...
-
<div>
<ul>
<li><img src="flower.png" id="flower" /></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li><img src="vstar.jpg" id="vstar" /></li>
</ul>
</div>
<input type="button" id="thebutton" value="Click" />
What could be wrong?