Help with expandable div in javascript_问答_开发者

开发者 https://www.devze.com 2023-02-21 13:15 出处：网络

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

相关专题：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;
    }