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.

Answer 1

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!