The problem you’re having is that the event-handlers are being bound before the elements are present in the DOM, if you wrap the jQuery inside of a $(document).ready()
then it should work perfectly well:
$(document).ready( function(){ $("#music").click(function () { $("#musicinfo").show("slow"); }); });
An alternative is to place the <script></script>
at the foot of the page, so it’s encountered after the DOM has been loaded and ready.
To make the div
hide again, once the #music
element is clicked, simply use toggle()
:
$(document).ready( function(){ $("#music").click(function () { $("#musicinfo").toggle(); }); });
And for fading:
$(document).ready( function(){ $("#music").click(function () { $("#musicinfo").fadeToggle(); }); });