JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<div class="about__btn">Читать дальше <span>&rarr;</span></div>

CSS

.about__btn{
  cursor: pointer;
}
/*.about__btn span{
  pointer-events: none;
}*/

JavaScript

const aboutbtn = document.querySelector('.about__btn');

aboutbtn.addEventListener('click', (e) => {

//№1
 //e.target.innerText == 'Читать дальше →'  ? e.target.innerHTML = '<span>&larr;</span> Скрыть текст' : e.target.innerHTML = 'Читать дальше <span>&rarr;</span>';

//№2
  if (e.target.innerText == 'Читать дальше →') {
    e.target.innerHTML = '<span>&larr;</span> Скрыть текст'
    console.log(e.target);
  }

  if (e.target.innerText == '← Скрыть текст') {
    e.target.innerHTML = 'Читать дальше <span>&rarr;</span>';
  }
  
//№3
    /*switch (e.target.innerText) {
    case 'Читать дальше →':
      e.target.innerHTML = '<span>&larr;</span> Скрыть текст';
      break;

    case '← Скрыть текст':
      e.target.innerHTML = 'Читать дальше <span>&rarr;</span>';
      break;

    default:
      break;
  }*/
})