JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="Jonah_hide">
<p>  <a href="#" >
Hi I'm Jonah.</a></p>
<p>
i am 7
</p>   
</div>

<div id="question" style="display:none">
<h3>
Are You Sure you want to hide Jonah?
</h3>
<button id="button" >
Yes</button>
<button id="no">
No
</button>
</div>

<a class="stop_hiding" href="#stay" style="display:none" title="do you want to hide Jonah?">Stop Hiding Jonah!</a>

CSS

p {
  color: red
}
p { color: green}
body {
  background:white;
}
button {
  font-size:20px;
  padding:10px;
  border-radius:5px;
}
a { text-decoration:none; font-size:24px}

JavaScript

$('.Jonah_hide').click( function () {
  $(this).hide();
  $("#question").show();  
});

$('#button').click( function () {
  $("#question").hide();
  $(".stop_hiding").show();
});

$('#no').click( function () {
  $('#question').hide();
  $(".Jonah_hide").show();
});

$('.stop_hiding').click( function () {
  $(".Jonah_hide").show();
	$(".stop_hiding").hide();
});