Pokaż div #id na kliknięcie z jQuery

Question

Po kliknięciu div, chcę, aby pojawił się inny div.

Tak więc po kliknięciu przycisku "#music" chcę wyświetlić "#musicinfo".

Oto 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; 

} 

i jquery:

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

Każda pomoc w ogóle byłoby świetnie :)

Answer 1

Problem masz to, że zdarzenie-ładowarki są związane przed elementami są obecne w DOM, jeśli owinąć jQuery wewnątrz $(document).ready(), to powinno działać idealnie:

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

    }); 

Alternatywą jest umieszczenie <script></script> u podnóża strony, więc jest napotykane po załadowaniu i przygotowaniu modelu DOM.

Aby uczynić div ukryj kolejny raz element #music kliknięciu, wystarczy użyć toggle():

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

JS Fiddle demo.

I na blaknięcie:

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

JS Fiddle demo.

Answer 2

Możesz użyć jQuery toggle, aby pokazać i ukryć div. Skrypt będzie tak

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

Answer 3

Jest to prosty sposób wyświetlania Div przy użyciu: -

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