Toggle CSS Class on Event with jQuery

Question

I have a block of HTML that looks like this:

<div data-toggle="collapse" data-parent="#groupOptions" data-target="#group" aria-expanded="true" aria-controls="group" class="collapsable-group-header">
  <h3><span class="glyphicon glyphicon-chevron-right toggle"></span> Group</h3>
</div>

This HTML is using Bootstrap's collapse control. The behavior works fine. I'm now trying to change the glyphicon from right to down. To do that, I have the following:

$('#group')
  .on('show.bs.collapse', function () { 
    var $toggle= $('#group > .toggle');
    $toggle.removeClass('glyphicon-chevron-right');
    $toggle.addClass('glyphicon-chevron-down');
    console.log($toggle.html());
  })
  .on('hide.bs.collapse', function() { alert('hiding...'); })
;

Unfortunately, this is not working. My console.log statements are printing undefined. Yet, if I do console.log($toggle) I see an element. What am I missing?

Thank you!

is the alert working?...

briosheje
– briosheje

2015-01-21 16:41:29 +00:00
Commented Jan 21, 2015 at 16:41 — briosheje
– briosheje, Commented Jan 21, 2015 at 16:41

beautifulcoder · Accepted Answer · 2015-01-21 16:45:26Z

4

Change

$('#group > .toggle');

To

$('[data-target=#group] .toggle');

I don't see anything with an id set to group.

Also, .toggle isn't the immediate child of the parent so get rid of >.

answered Jan 21, 2015 at 16:45

beautifulcoder

11.4k3 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fredrik Holm · Accepted Answer · 2015-01-21 16:47:36Z

0

The result returned by jQuery is an array. Use $toggle[0].removeClass... instead.

answered Jan 21, 2015 at 16:47

Fredrik Holm

1669 bronze badges

1 Comment

Fredrik Holm Over a year ago

If your intention is to target a single element that is... :-)

Collectives™ on Stack Overflow

Toggle CSS Class on Event with jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related