CODEWITHSUNDEEP
jquery
sens_vk
sens_vk

Reputation: 211

toggleClass on Click jQuery Issue

I am having the super standard 'View more' button and then on click it becomes 'View less'.

For some reason my code is not working and I can't understand why.

I tried changing the JS a bit and different workarounds but I can't figure it out.

I want to make it on click show more / show less

Link to 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>

Upvotes: 1

Views: 52

Answers (1)

mplungjan
mplungjan

Reputation: 177786

$(this) in your delegated click refers to .js-toggle-handle and not to body.

You just want this

$('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>

Upvotes: 1

Related Questions