Display style's when password is entered

Question

On my wordpress site i have a page that can only be accessed by a password, this is using the wordpress built in password protected visibility.

What i want is when the user inputs the password, i want to add css that will display another item in the header menu that is currently hidden.

#menu-item-222 {
display:none;
}

Is there anyway to achieve this using php?

EDIT:

Looking back i wasn't really clear in my answer, What i wanted to do was show the styles after the user has inputted the correct password and then show the hidden box on page/change and refresh

This is what i got so far from the answers.

jQuery("input[name=Submit]").click(function() {
if(jQuery("input[type='password']").val() == 'test12345'){
jQuery("#menu-item-222").css("display","block")
}
});

Answer 1

Please check this. You need to enter right password to display hidden element on top.

 $("#pwd").keyup(function() { if ($('#pwd').val() == "test123"){ $('#content').show('slow'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="content" style="display:none;"> Testing Content </div> <form> Enter the password to see the content: <input id="pwd" type="password" name="pwd" /> </form> 

Answer 2

It can be achieved using javascript or jquery by possibly checking the value of your input.Let's assume that your password is '12345'

$(document).ready(function(){
  if($("input[type='password']").val() == '12345'){
    $("#menu-item-222").css("display","block")
  }
})