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 :)
The problem you're having is that the event-handlers are being bound before the elements are present in the DOM, if you wrap the jQuery inside of a $(document).ready()
then it should work perfectly well:
$(document).ready(
function(){
$("#music").click(function () {
$("#musicinfo").show("slow");
});
});
An alternative is to place the <script></script>
at the foot of the page, so it's encountered after the DOM has been loaded and ready.
To make the div
hide again, once the #music
element is clicked, simply use toggle()
:
$(document).ready(
function(){
$("#music").click(function () {
$("#musicinfo").toggle();
});
});
And for fading:
$(document).ready(
function(){
$("#music").click(function () {
$("#musicinfo").fadeToggle();
});
});