Jquery Password Protected Hidden Table not working on div

December 26, 2022

This is just a simple div to protect content by password. I know it’s not any kinds of security. But little. The question is, its only working on table tag.

Thats mean, if I change table tag and replace with div, its not working.

Example: When

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

it works.

But when;

<div id="table">
<div id="HIDDENDIV">hidden stuff</div>
</div>

Not working.

Here’s my complete code.

$("#password").keydown(function() {
  if (event.keyCode == 13) document.getElementById('button').click()
});

$("#button").click(function() {
  if (document.getElementById('password').value == '123') {
    document.getElementById('table').classList.toggle('show');
    document.getElementById('passw').style.display = 'none';
  } else {
    alert('Invalid Password!');
    password.setSelectionRange(0, password.value.length);
  }
});

#HIDDENDIV {
  display: none;
}

#table.show div>#HIDDENDIV {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<div id="passw">
  <input type="password" id="password" />
  <input id="button" type="button" value="Login" />
</div>

<section id="table">
  <div id="HIDDENDIV">hidden stuff</div>
</section>

Why It’s not working ?

>Solution :

In your CSS code, remove tr from #table.show > #HIDDENDIV because you changed it to div.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<style>
#HIDDENDIV {
    display: none;
}
#table.show > #HIDDENDIV {
    display: block;
}

</style>

<div id="passw">
    <input type="password" id="password" />
    <input id="button" type="button" value="Login" />
</div>

<div id="table">
    <div id="HIDDENDIV">hidden stuff</div>
</div>

<script>
$("#password").keydown(function () {
    if (event.keyCode == 13) document.getElementById("button").click();
});

$("#button").click(function () {
    if (document.getElementById("password").value == "123") {
        document.getElementById("table").classList.toggle("show");
        document.getElementById("passw").style.display = "none";
    } else {
        alert("Invalid Password!");
        password.setSelectionRange(0, password.value.length);
    }
});
</script>

Attribution for @Michael M. in comments for mentioning the solution.