Ad

Doing SlideToggle And ToggleClass At The Same Time

- 1 answer

I'm trying to do a slideToggle and a toggleClass at the same time:

css

li ul { display: none; }

html

<li>
    <div class="group"><i class="arrow_maximize"></i> Title</div>
    <ul>
        <li>anything</li>
    </ul>
</li>

js

'click .group': function (event) {
        $(event.currentTarget).next('ul').slideToggle(200);
        $(event.currentTarget).children('i').toggleClass('arrow_minimize');
}

What I try to get is:

  1. Clicking on .group will slideDown the ul; at the same time the class of i should be changed to 'arrow_minimize'.

  2. Clicking again should set it back: slideUp of ul, change class of i to 'arrow_maximize'

Ad

Answer

In the toggleClass you also need to specify the other class which the element already has:

$(function(){
  $('.group').on('click', function(){
    $(this).next('ul').slideToggle(200);
    $(this).children('i').toggleClass('arrow_minimize arrow_maximize');
  });
});
li ul { display: none }
i.arrow_maximize:before { content: "\25ba" }
i.arrow_minimize:before { content: "\25bc" }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
    <div class="group"><i class="arrow_maximize"></i> Title</div>
    <ul>
        <li>anything</li>
    </ul>
</li>

Ad
source: stackoverflow.com
Ad