Javascript keeps a div hidden until you click a button, need help modifying

hide, html, javascript

Solution

You could do like this, if you want to display and hide particular div on click of button.

<style>
.hidden{
    display:none;
}

.unhidden{
    display:block;
}
</style>
<script type="text/javascript">
function unhide(clickedButton, divID) {
var item = document.getElementById(divID);
if (item) {
    if(item.className=='hidden'){
        item.className = 'unhidden' ;
        clickedButton.value = 'hide'
    }else{
        item.className = 'hidden';
        clickedButton.value = 'unhide'
    }
}}

</script>

<body>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
<input type="button" onclick="unhide(this, 'about') " value="unhide">
</body>

UPDATE: Pass the other div id which you want to make disappear on click of div one. Please update your code with below's code.

SCRIPT

<script type="text/javascript">
    function unhide(divID, otherDivId) {
    var item = document.getElementById(divID);
    if (item) {
            item.className=(item.className=='hidden')?'unhidden':'hidden';
        }
        document.getElementById(otherDivId).className = 'hidden';
    }
</script>

HTML

<p style="padding-top:20px">
    <a href="javascript:unhide('link', 'about')" class="button">This is a link</a><br><br>
    <a href="javascript:unhide('about', 'link')" class="button">About</a>
</p>

Problem

Basically, my code right now keeps a few of the divs I have on my website hidden and then when you click on a link, it makes the divs appear. I need help so that it so that when I click one link and a div appears and I click on another link, the previous one disappears. So let's say I click the link 'About', the div appears, good. Then I click on 'Help' and that div just appears OVER 'About' making things messy. ``` <script type="text/javascript"> function unhide(divID) { var item = document.getElementById(divID); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; }} </script> ``` ^That is my code, here is a sample of it in my website: ``` <div id="about" class="hidden"> <div class="content3"> <p>This is the about section.</p> <p>It is currently still being worked on.</p> </div> </div> ``` The class 'content3' is just styling in my css file. ``` .content3 { background-color:#FFFFFF; width:750px; height:600px; padding:5px; padding-left:40px; margin-top:-650px; margin-left:auto; margin-right:auto; } ``` UPDATE: Sorry, I should elaborate more.. I need to be able to basically click a first link and have it show a box of text. and then click a second link that will hide that box of text associated with the first link and show a new one that is associated with the second link. This is my FULL code: HTML ``` <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="main.css"> <script type="text/javascript"> function unhide(divID) { var item = document.getElementById(divID); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; }} </script> </head> <body> <div class="title"> <p class="text_header">Benjamin Midyette</p> <p style="margin-top:-50px">Computer/Network Engineer, Web Developer</p> </div> <div class="content" align="left"> <p style="padding-top:20px"> <a href="javascript:unhide('link')" class="button">This is a link</a><br><br> <a href="javascript:unhide('about')" class="button">About</a> </p> </div> <div id="Resume" class="content2"></div> <div id="link" class="hidden" style="position:absolute; left:300px; margin-top:-700px;"> <img alt="A Link" src="pictures/link.png" height="420" width="420"> </div> <div id="about" class="hidden"> <div class="content3"> <p>This is the about section.</p> <p>It is currently still being worked on.</p> </div> </div> </body> </html> ``` CSS: ``` body { background-image:url('http://www.nsgaming.us/pictures/nebula.png'); background-repeat: no-repeat; background-size: 100% auto; background: url('http://www.nsgaming.us/pictures/nebula.png') fixed 100% 100%;} /*Text styling*/ .text_header { font-size:72px } .title { margin-top:-30px; margin-left:auto; margin-right:auto; text-align: center; color:#ffffee; width:600px; border-radius:8px; background-color:#000000; background:rgba(0,0,0,.9); padding-bottom:1px; } /*Top Button styling*/ .button { border:2px solid black; background: #3B3B3B; /*#8C8C8C*/ padding: 3.5px 5px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: white; font-size: 18px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; } .button:hover { background: #770819; color: #ffffff; text-decoration:none;} .button:active { background: #590819;} .content { margin-top:40px; border: 1px solid black; border-radius:8px; Opacity:0.8; background:#222222; width:175px; height:400px; padding-left:20px; padding-top: 0px;} .content2 { background-color:#222222; border-radius:4px; width:800px; height:650px; padding:5px; padding-left:40px; margin-top:-401px; margin-left:auto; margin-right:auto; } .content3 { background-color:#FFFFFF; width:750px; height:600px; padding:5px; padding-left:40px; margin-top:-635px; margin-left:auto; margin-right:auto; } .hidden { display: none; } .unhidden { display: block; } container { align:right;} opener { align:left;} ```

Original source