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();
});
});
You can use jQuery toggle to show and hide the div. The script will be like this
<script type="text/javascript">
jQuery(function(){
jQuery("#music").click(function () {
jQuery("#musicinfo").toggle("slow");
});
});
</script>
This is simple way to Display Div using:-
$("#musicinfo").show(); //or
$("#musicinfo").css({'display':'block'}); //or
$("#musicinfo").toggle("slow"); //or
$("#musicinfo").fadeToggle(); //or
Source: Stackoverflow.com