Mostrar div #id al hacer clic con jQuery

Question

Cuando se hace clic en un div, quiero que aparezcan diferentes div.

Por lo tanto, cuando se hace clic en '#music', quiero que '#musicinfo' aparezca.

Aquí es el 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; 

} 

y jQuery:

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

Cualquier ayuda en absoluto sería grande :)

Answer 1

El problema que tiene es que el evento manipuladores se enlazan antes de que los elementos estén presentes en el DOM, si ajusta el jQuery dentro de un $(document).ready(), entonces debería funcionar perfectamente bien:

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

    }); 

Una alternativa es colocar el <script></script> al pie de la página, por lo que se encuentra después de que el DOM se haya cargado y listo.

Para hacer el div ocultar de nuevo, una vez que se hace clic en el elemento #music, sólo tiene que utilizar toggle():

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

JS Fiddle demo.

Y por desvanecimiento:

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

JS Fiddle demo.

Answer 2

Puede usar jQuery toggle para mostrar y ocultar el div. El guión será así

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

Answer 3

Esta es la forma sencilla para mostrar Div usando: -

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