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

To show and hide div on mouse click using jQuery, use the toggle() method. On mouse click, the div is visible and on again clicking the div, it hides.