html - Show div #id on click with jQuery

Question

When a div is clicked, I want different div to appear.

Thus, when '#music' is clicked, I want '#musicinfo' to appear.

Here is the css:

#music {
    float:left;
    height:25px;
    margin-left:25px;
    margin-top:25px;
    margin-right:80px;
    font-family: "p22-underground",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size:13pt;

    }

#musicinfo {
    width:380px;
    margin:25px;
    font-family: "p22-underground",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size:13pt;
    line-height:1.1;
    display:none;

}

and jquery:

<script type="text/javascript">
$("#music").click(function () {
$("#musicinfo").show("slow");
});
</script>

Any help whatsoever would be great :)

Answer 1

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();
        });
    });

JS Fiddle demo.

And for fading:

$(document).ready(
    function(){
        $("#music").click(function () {
            $("#musicinfo").fadeToggle();
        });
    });

JS Fiddle demo.