Показать div #id при нажатии с помощью jQuery

Когда щелкает div, я хочу, чтобы появился другой div.

Таким образом, когда нажимается "# music", я хочу, чтобы "#musicinfo" появлялся.

Вот 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;

}

и jquery:

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

Любая помощь была бы большой:)

Ответ 1

Проблема, с которой вы сталкиваетесь, заключается в том, что обработчики событий привязаны до того, как элементы присутствуют в DOM, если вы завернете jQuery внутри $(document).ready(), тогда он должен работать отлично:

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

    });

Альтернативой является размещение <script></script> у подножия страницы, поэтому он встретился после того, как DOM был загружен и готов.

Чтобы снова скрыть div, после нажатия элемента #music просто используйте toggle():

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

JS Fiddle demo.

И для затухания:

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

JS Fiddle demo.

Ответ 2

Вы можете использовать jQuery toggle для отображения и скрытия div. script будет таким образом

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

Ответ 3

Это простой способ отображения Div, используя: -

$("#musicinfo").show();  //or
$("#musicinfo").css({'display':'block'});  //or
$("#musicinfo").toggle("slow");   //or
$("#musicinfo").fadeToggle();    //or