Изменить текст при нажатии на ссылки

Question

Итак, я работаю над сворачивающимся контейнером div, используя bootstrap. Он отлично работал, пока я не попытался добавить модификацию.

Я добавил текстовую ссылку, которая говорит «Просмотреть больше», чтобы мои пользователи знали, что есть еще текст для чтения. В любом случае, я написал код jquery, чтобы изменить текст «Просмотреть больше» на «Закрыть» КОГДА контейнер DIV свернут или показан.

Моя цель:

Когда пользователь решил свернуть контейнер div, я хочу, чтобы он изменил текст «просмотреть больше» на «закрыть»

Вот моя проблема:

Мой код JQUERY, который изменяет текст «СМОТРЕТЬ БОЛЬШЕ» на «ЗАКРЫТЬ», работает только с первыми текстовыми ссылками. Последующие текстовые ссылки не изменяются, даже если я щелкнул по нему.

Кроме того, на странице есть пять текстовых ссылок «просмотреть больше» с теми же именами классов (не уверен, что эта информация актуальна но стоит упомянуть, я думаю ...)

В любом случае, вы можете увидеть, что не так в приведенных ниже ссылках ( gif и codepen )

Вот вам GIF для справки. imgur.com / V8Q4RSj

Вот мой полный код: https://codepen.io/bendaggers/pen/dyoqqVE

Вот мой JQUERY Код:

$("#yt").click(function(){

  $('#closeopen').text($('#closeopen').text() == 'View More' ? 'Close' : 'View More');

});

Буду признателен всем, кто сможет мне помочь.

Answer 1

Использование CSS Псевдоэлемент ::before

.collapse:not(.show) + .closeopen::before {
  content: 'View More';
}
.collapse.show + .closeopen::before {
  content: 'Close';
}

Рабочая демонстрация

https://codepen.io/aswinkumar863/pen/gOpddZw

Answer 2

Возможный подход:

jQuery(document).ready(
  function () {
    jQuery('.toggleMe')
      .on(
        'click',
        function() {
          var state = jQuery(this).data('state');

          jQuery(this).data('state', 'closed' === state ? 'revealed' : 'closed');
          jQuery(this).text('closed' === state ? 'Close' : 'Read More');
        }
      );
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span
  class="toggleMe"
  data-state="closed"
>
  Read More
</span>
<br>
<br>
<span
  class="toggleMe"
  data-state="closed"
>
  Read More
</span>