Click Event on JavaScript

JavaScript, HTML, CSS

by Sayham Chowdhury

HTML

<h1>Click Event</h1>
<p id="cToHide">Click to hide</p>
<p class="hidden" id="cToSee">Hidden, click to make visible!</p>

CSS

.hidden {
display: none;
visibility: hidden;
}
h1{
  color: darkblue;
  text-align: center;
}
#cToHide {
  color: red;
  font-size: 20pt;
  border: solid 1px teal;
  Text-align: center;
}
#cToSee{
  color: teal;
  font-size: 20pt;
  border: solid 1px red;
  Text-align: center;
}

JavaScript

$('body').on('click', 'h1', function(e) {
    event.preventDefault();
    alert('Header "' + $(this).text() + '" was clicked!');
});

$('body').on('click', '#cToHide', function(e) {
    event.preventDefault();
    $(this).addClass('hidden');
    $('#cToSee').removeClass('hidden');
});

$('body').on('click', '#cToSee', function(e) {
    event.preventDefault();
    $(this).addClass('hidden');
    $('#cToHide').removeClass('hidden');
});