toggleClass on Click jQuery Issue

Question

У меня суперстандартная кнопка «Просмотреть больше», а затем при нажатии она становится «Просмотреть меньше».

По какой-то причине мой код не работает, и я не могу понять, почему.

Я попытался немного изменить JS и другие обходные пути, но я не могу понять это.

Я хочу сделать это по клику, показать больше / показать меньше

Ссылка на codepen:

https://codepen.io/vasilkrumov/pen/YzzKzoj

$('body').on('click', '.js-toggle-handle', function(e) {
  e.preventDefault()
  $(this)
    .find('.js-toggle-handle')
    .toggleClass('hidden')
})

.js-toggle-handle.notification-preferences-toggle-button.desktop.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="js-toggle-handle notification-preferences-toggle-button desktop" <i class="icon-angle-up js-toggle-indicator" data-icon="arrow-up"></i>Show More</a>

<a href="#" class="js-toggle-handle notification-preferences-toggle-button desktop hidden" <i class="icon-angle-up js-toggle-indicator" data-icon="arrow-up"></i>Show Less</a>

Answer 1

$(this) в вашем делегированном клике относится к .js-toggle-handle, а не к body.

Вы просто хотите это

$('body').on('click', '.js-toggle-handle', function(e) {
  e.preventDefault()
  $('.js-toggle-handle').toggleClass('hidden')
})

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="js-toggle-handle notification-preferences-toggle-button desktop" <i class="icon-angle-up js-toggle-indicator" data-icon="arrow-up"></i>Show More</a>

<a href="#" class="js-toggle-handle notification-preferences-toggle-button desktop hidden" <i class="icon-angle-up js-toggle-indicator" data-icon="arrow-up"></i>Show Less</a>