Mostra div #id al clic con jQuery

Question

Quando si fa clic su un div, voglio apparire div differenti.

Pertanto, quando si fa clic su "#music", desidero visualizzare "#musicinfo".

Ecco il 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; 

} 

e jQuery:

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

Qualsiasi tipo di aiuto sarebbe grande :)

Answer 1

Il problema che stai avendo è che l'evento-gestori sono vincolati prima che gli elementi siano presenti nel DOM, se si avvolge il jQuery all'interno di un $(document).ready() allora dovrebbe funzionare perfettamente:

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

    }); 

Un'alternativa è quella di posizionare il <script></script> ai piedi della pagina, quindi è incontrato dopo il DOM è stato caricato e pronto.

Per rendere la pelle div ancora una volta, una volta che l'elemento #music viene cliccato, è sufficiente utilizzare toggle():

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

JS Fiddle demo.

E per sbiadimento:

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

JS Fiddle demo.

Answer 2

È possibile utilizzare jQuery toggle per mostrare e nascondere il div. Lo script sarà come questo

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

Answer 3

Questo è il modo semplice per visualizzare Div utilizzando: -

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