Как переделать код, что бы при клике заменил текст Подробнее на Скрыть?

Question

[Anna-17]

Добрый день! Помогите пожалуйста, в этом коде какой код добавить, что бы при клике изменился текс Подробнее на Скрыть и обратно...

<div>
 Спойлер №1 <a href="" class="spoiler_links">Подробнее</a>
 <div class="spoiler_body">
  Текст в первом спойлере<br> 
  Текст в первом спойлере
 </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
 $('.spoiler_links').click(function(){
  $(this).parent().children('div.spoiler_body').toggle('normal');
  return false
 });
});
</script>

Answer 1

[Klein Maximus]

Можно менять innerHtml: https://codesandbox.io/s/compassionate-forest-xlbl...

Но я бы все же посоветорал забыть jQuery и начать использовать React, Vue, на худой конец Angular.

Comments

[Anna-17]

Просто этот блок буду разместить в WordPress, а тот код который вы писали в WordPress не работает

[Klein Maximus]

Anna-17, оно работает, просто применить надо правильно. Вы же не писали, что оно где-то в Wordpress должно быть применено.

<script type="text/javascript">
  const HIDE = "Скрыть";
  const MORE = "Подробнее";

  $(document).ready(function(){
    $('.spoiler_links').click(function(event){
      $(event.target).parent().children('div.spoiler_body').toggle('normal');
      event.target.innerHTML = event.target.innerHTML === HIDE ? MORE : HIDE;
      return false
    });
  });
</script>

[Klein Maximus]

Anna-17, и может стоит все же хоть немного разобраться, что и как работает, а не задавать вопросы не попытавшись понять, что тут и как происходит?

А потом пользователи сайтов вопросы задают, почему ничего не работает.

[Anna-17]

Klein Maximus, Спасибо

[Klein Maximus]

Anna-17, если помогло, пожалуйста, отметьте мой ответ решением.

[Anna-17]

Уже отметила

[Klein Maximus]

Anna-17, спасибо!