css - Show hidden section by javascript function

I have the <h1> tag in my HTML body and I want it to react to each time a user clicks on it according to the conditions I have defined in a javascript function called ShowIt(). The first click will show the hidden section and second click to re-hide it, toggling back and forth. However, I can't get it to work.

CSS:

*{
    margin:0;
    padding:0;
}

header,section,nav,aside,footer{
    display: block;
}

.wrapper{
    position: relative;
    width: 1000px;
    height: 4000px;
    margin: 0 auto;
}

#hid{
    background-color: #FF9;
    color: #000;
    font-size: 25px;
    font-family: Arial;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 1200px;
    display:none;
}

h1{
    cursor: pointer;
    color: #000;
    font-size: 25px;
    font-family: Arial;
    position: absolute;
    top: 1150px;
}

HTML & JS:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="includes/style.css">
        <script src="includes/script.js"></script>
        <title>Some JS</title>

        <script>
            window.onload=function(){

                function ShowIt(){
                    var obj = document.getElementById("hid");
                    if(obj.style.display == "block")
                            obj.style.display = "none";
                    else
                            obj.style.display = "block";
                };
            }
        </script>

    </head>
    <body>
        <div class="wrapper">
            <section id="hid">hidden layer</section>
            <h1 onclick="ShowIt">click here</h1>
        </div>
    </body>
</html>

CSS:

*{
    margin:0;
    padding:0;
}

header,section,nav,aside,footer{
    display: block;
}

.wrapper{
    position: relative;
    width: 1000px;
    height: 4000px;
    margin: 0 auto;
}

#hid{
    background-color: #FF9;
    color: #000;
    font-size: 25px;
    font-family: Arial;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 1200px;
    display:none;
}

h1{
    cursor: pointer;
    color: #000;
    font-size: 25px;
    font-family: Arial;
    position: absolute;
    top: 1150px;
}

HTML & JS:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="includes/style.css">
        <script src="includes/script.js"></script>
        <title>Some JS</title>

        <script>
            window.onload=function(){

                function ShowIt(){
                    var obj = document.getElementById("hid");
                    if(obj.style.display == "block")
                            obj.style.display = "none";
                    else
                            obj.style.display = "block";
                };
            }
        </script>

    </head>
    <body>
        <div class="wrapper">
            <section id="hid">hidden layer</section>
            <h1 onclick="ShowIt">click here</h1>
        </div>
    </body>
</html>

Share Improve this question edited Apr 7, 2014 at 13:42 Kelderic 6,7179 gold badges49 silver badges89 bronze badges asked Apr 7, 2014 at 13:28 shmnsw 6493 gold badges11 silver badges24 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

Your function should be declared outside the window.onload other wise you'll get scope issues.

Some JS

    <script>
       function ShowIt(){
          var obj = document.getElementById("hid");
          if(obj.style.display == "block")
             obj.style.display = "none";
          else
             obj.style.display = "block";
       };
    </script>

</head>
<body>
    <div class="wrapper">
        <section id="hid">hidden layer</section>
        <h1 onclick="ShowIt()">click here</h1>
    </div>
</body>

And to call that function you need to do: ShowIt()

you have define ShowIt function inside window.onload function, this wont work because socpe of ShowIt is not global.

 <script>

                function ShowIt(){
                    var obj = document.getElementById("hid");
                    if(obj.style.display == "block")
                            obj.style.display = "none";
                    else
                            obj.style.display = "block";
                };

        </script>



 <div class="wrapper">
            <section id="hid">hidden layer</section>
            <h1 onclick="ShowIt()">click here</h1>
        </div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

css - Show hidden section by javascript function - Stack Overflow

CSS:

HTML & JS:

CSS:

HTML & JS:

2 Answers 2

与本文相关的文章

评论列表(0)