DisEngaged DisEngaged - 5 months ago 7
Javascript Question

jQuery, not working with span



How do I get jQuery to work with a span id tag?


jQuery is not seeing my id correctly. When I use the h6 tags without the span, it works fine. I'm open to using a div or some other work around.

Thanks,


<!DOCTYPE html PUBLIC "><html>
<head>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#PlusMinus').click(function() {
if($(this).val() == "+") {
$(this).val("-");
}else {
$(this).val("+");
}
$("body h6").toggle();
});
});
</script>

</head>
<body>
<input type='button' value='+' id='PlusMinus'/>
<!--WITH SPAN THE CODE BREAKS-->
<span id="h6">Larger</span>
<span id="h6" style="display: none">Smaller</span>
</body>
</html>


WITHOUT SPAN

h6 Larger /h6

h6 style="display: none">Smaller /h6

Answer

Elements should have unique ID's. Also, your selector is wrong (you would use a # in front if selecting an ID). Try using a class since you want to affect more than one item:

<span class="h6">Larger</span>

$('.h6').toggle();
Comments