Hide a DIV element with a password

Question

I have a DIV element split into 2 tables, right and left. The left table is fine as it is, but the right table needs to be hidden until a user enters a password or phrase, which will open/unlock that table.

This is NOT a matter of security, but one of technicality. I was requested to not make that section directly accessible, but add some sort of common password (without need of registration).

I know client side JS is weak for security but security in this case is not an issue. What's my best/most efficient option? I've tried a lightbox solution, but I can't figure out how to show the DIV once the correct phrase is entered.

hide it with css, then when the correct password is presented, show it using javascript. What have you tried? What problems are you having and why? — Kevin B, Jul 11 '13 at 19:48
I got it to work as it should within jsfiddle, but when I implement into my html, after entering the password, there's no toggle. — PCLove, Jul 11 '13 at 20:55
Can you explain that to me please? I think I'm not placing the jquery and css in the proper order. JSFiddle separates them all, so how do I implement? — PCLove, Jul 11 '13 at 21:04
Voted to close since there is no code (or even example code). — Erik Philips, Dec 06 '17 at 19:56

score 4 · Answer 1 · edited Dec 06 '17 at 19:57

here is what i did:

http://jsfiddle.net/rp40rkpo/3/

#HIDDENDIV {
    display: none;
}

#table td {
    padding: 1em;
    border: 1px solid black;
}


#table.show tr > *:nth-child(2) {
    display: block;
}

<div id="passw">
            <div>
                (THE PASSWORD IS PASSWORD) <br />
                Enter the password to proceed:
            </div>
            <div>
            
                <input type="password" id="password" onkeydown="if (event.keyCode == 13) document.getElementById('button').click()" /> <!-- IMPORTANT! this part is so if you click enter, it works. -->
                </div>
            

            <div>
                <br/>
                <input id="button" type="button" value="Login" onclick="if (document.getElementById('password').value == 'PASSWORD') { 
document.getElementById('table').classList.toggle('show');   document.getElementById('passw').style.display='none'; } 
else {  alert('Invalid Password!'); password.setSelectionRange(0, password.value.length);   } " />
            </div>
<!-- it will autoselect wrong input if wrong -->
    <br /><br /><br />
        </div>

<table id="table">
    <tr> 
        <td>stuff</td>
        <td id="HIDDENDIV" >hidden stuff</td>
    </tr>
</table>

Warning: this is not very secure. Anyone who knows how to operate a web inspector will be able to view the hidden div

I made it so if you get a wrong password, it alerts "Invalid password" and selects your password so you can try again without selecting it.

Also, the password box hides when you get it right.

Hope it helps!

Code for an Answer should *always* be [included in the answer itself](https://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers/8259#8259). — Erik Philips, Dec 06 '17 at 19:57
@ErikPhilips thanks for editing! I'll keep that in mind when I answer other posts. — jbwar22, Dec 06 '17 at 19:58

Hide a DIV element with a password

1 Answers1