<h3>На details + CSS</h3>
<details>
  <summary></summary>
  <p>Скрытый текст</p>
</details>
<hr>
<h3>На скрытом input + CSS</h3>
<div>
  <input id="toggle" type="checkbox">
  <label for="toggle"></label>
  <p>Скрытый текст</p>
</div>
<hr>
<h3>На JS + CSS</h3>
<div>
  <span class="collapsed"></span>
  <p>Скрытый текст</p>
</div>

input {
  display: none;
}

label,
span,
summary {
  cursor: pointer;
}

summary::marker {
  content: '';
}

label:before,
span.collapsed:before,
summary:before {
  content: 'Развернуть';
}

input:checked + label:before,
span:before,
details[open] summary:before {
  content: 'Свернуть';
}

input + label + p,
span.collapsed + p {
  display: none;
}

input:checked + label + p {
  display: block;
}

document.querySelector('span').addEventListener(
  'click',
  (e) => {
    e.target.classList.toggle('collapsed');
  },
);