Hide and show <p> element with javascript

Question

I am creating a text based RPG with JavaScript. I want to hide and show a <p> element when a specific input is made.

Answer 1

You can use the CSS style display: none; to hide elements with out removing them from document.

Add the following CSS style with a selector of p.hidden to your HTML file or an external style sheet.

<style>
   p.hidden {
      display: none;
   }
</style>

---

In your HTML file you can set Class="hidden" to all <p> elements that you do not want to display.

<h1>This is a visible heading</h1>
   <p> class="hidden">text here will not be displayed</p>

Answer 2

To achieve your expected result, use below

HTML:

<input type="text" maxlength="1">
<p>No, I dont want to kill you. Why are you here? <br>Prisoner: I dont know, I got captored. You need to help me. You need to find the key to the handcuffs. I am not sure where they are. </p>

JS

$(document).ready(function(){
  $('input').keypress(function(e) { 
    if(e.keyCode  == 13){

      if($('input').val()=='1'){
        $("p").toggle();
      }else{
        $("p").toggle();
      }
  }
    });
});

http://codepen.io/nagasai/pen/Krkxdg