<p class="text">text</p>

.text {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  cursor: pointer;
  opacity: 1;
  transition: 1s;
}
.hide {
  opacity: 0;
}

// vanila js
/* document.querySelector('.text').addEventListener('click', e => {
  e.target.classList.toggle('hide')
  console.log(e.target)
}) */

//jquery
$('.text').on('click', function(e) {
  $(this).toggleClass('hide')
})