Help with expandable div in javascript
Hi i'm new to JavaScript and i am looking to learn how to put a <div> within a <div> so when the user clicks on the first one it opens the content of the second(hidden until clicked) and closes so my page wont be a million miles of scrolling down . but my problem is the all the content is displayed on page load instead of on click
heres the code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
</head>
thank's in advance
<input type="button" onclick="return toggleMe('para1')" value="Toggle"><br>
<p id="para1">(lots of text)</p>
<br>
<input type="button" onclick="return toggleMe('para2')" value="Toggle"><br>
<div id="para2">(lots of text)</d开发者_开发技巧iv>
<br>
<input type="button" onclick="return toggleMe('para3')" value="Toggle"><br>
<span id="para3">(lots of text)</span>
put style="display:none" inside contents DIVs you want to be hidden at load
<div id="para2" style="display:none" >(lots of text)</div>
you can make function that hides all of DIVs before calling the toggle
or you can put the following in toggle function
function toggleMe(a){
//hide all DIVz
document.getElementById("para1")style.display="none";
document.getElementById("para2")style.display="none";
document.getElementById("para3")style.display="none";
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
加载中,请稍侯......
精彩评论