how to add and remove multiple class in tab-pane in jquery or javascript

Question

I am working on bootstrap tab-pane for add multiple class its add an only single class can anyone suggest me how to add multiple class when tab-pane active my HTML code is

    <ul class="nav nav-tabs">
<li id="li"  class="active">
<a href="#abc" data-toggle="tab">my_data 
<i  class="pull-right more-less glyphicon glyphicon-plus" id="icon">
</i>
</a>
</li>
</ul>

and jquery is

$('#li > a').click(function() {
  $(this).parents('#li').find('i')
    .toggleClass('pull-right')
    .toggleClass('glyphicon')
    .toggleClass('glyphicon-minus');
  $(this).parents('#li').siblings('.#li').find('i')
    .removeClass('pull-right ')
    .removeClass('glyphicon')
    .removeClass('glyphicon-minus')
    .addClass('pull-right')
    .addClass('glyphicon')
    .addClass('glyphicon-plus')

})

actually I want to add pull-right glyphicon glyphicon-minus if tab-pane active else add pull-right glyphicon glyphicon-plus in jquery or javascript.

Answer 1

You can pass multiple class names in toggleClass() , addClass() , removeClass() . Like -

  $('#li > a').click(function() {
    $(this).parents('#li').find('i')
      .toggleClass('pull-right glyphicon glyphicon-minus')
    $(this).parents('#li').siblings('.#li').find('i')
      .removeClass('pull-right glyphicon glyphicon-minus')
      .addClass('pull-right glyphicon glyphicon-plus')
  })