jQuery: How to change icon along side text

Question

I have following JsFiddle:

<div class="col-md-6">
 <a id="IdAdvanceSearch" href="javascript:;" 
    class="col-sm-offset-2"
   data-advance-search="S">
      Show Advance Search 
     <span class="glyphicon glyphicon-chevron-down"></span>
  </a>
</div>

JsFiddle Link.

Can some one guide me how can I change icon to (glyphicon-chevron-up).

Thanks

Answer 1

change your HTML like this-

    <div class="col-md-6">
     <a id="IdAdvanceSearch" href="javascript:;" class="col-sm-offset-2" data-advance-search="S">
      Show Advance Search 

     </a>
     <span class="glyphicon glyphicon-chevron-down"></span>
   </div>

and modify your JQuery as below-

jQuery('#IdAdvanceSearch').on('click', function(){
var dh = jQuery("#IdAdvanceSearch").data('advance-search');

if(dh == 'S'){
  $('#IdAdvanceSearch').next('.glyphicon-chevron-down').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
 jQuery("#IdAdvanceSearch").text('Hide Advance Search');
 jQuery('#IdAdvanceSearch').data('advance-search', 'H');
}
else if(dh == 'H'){
 $('#IdAdvanceSearch').next('.glyphicon-chevron-up').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
 jQuery("#IdAdvanceSearch").text('Show Advance Search');
 jQuery('#IdAdvanceSearch').data('advance-search', 'S');
}
});

Answer 2

You can use removeClass() and addClass() , also I've updated your markup for making it simple

jQuery('#IdAdvanceSearch').on('click', function() {
  var dh = jQuery(this).data('advance-search');
  if (dh === 'S') {
    jQuery(this).find('.text').text('Hide Advance Search')
      .end().data('advance-search', 'H')
      .find('.glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
  } else if (dh === 'H') {
    jQuery(this).find('.text').text('Show Advance Search')
      .end().data('advance-search', 'S')
      .find('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<div class="col-md-6">
  <a id="IdAdvanceSearch" href="javascript:;" class="col-sm-offset-2" data-advance-search="S">
    <span class="text">Show Advance Search </span>
    <span class="glyphicon glyphicon-chevron-down"></span>
  </a>
</div>

---

or using your same markup you can do something like this

jQuery('#IdAdvanceSearch').on('click', function() {
  var dh = jQuery(this).data('advance-search');

  if (dh === 'S') {
    jQuery(this).contents().eq(0).replaceWith('Hide Advance Search')
      .end().end().data('advance-search', 'H')
      .find('.glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
  } else if (dh === 'H') {
    jQuery(this).contents().eq(0).replaceWith('Show Advance Search')
      .end().end().data('advance-search', 'S')
      .find('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<div class="col-md-6">
  <a id="IdAdvanceSearch" href="javascript:;" class="col-sm-offset-2" data-advance-search="S">
    Show Advance Search
    <span class="glyphicon glyphicon-chevron-down"></span>
  </a>
</div>

---

or just update the entire html content inside

jQuery('#IdAdvanceSearch').on('click', function() {
  var dh = jQuery(this).data('advance-search');

  if (dh === 'S') {
    jQuery(this).data('advance-search', 'H')
      .html('Hide Advance Search<span class="glyphicon glyphicon-chevron-up"></span>');
  } else if (dh === 'H') {
    jQuery(this).data('advance-search', 'S')
      .html('Show Advance Search<span class="glyphicon glyphicon-chevron-down"></span>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<div class="col-md-6">
  <a id="IdAdvanceSearch" href="javascript:;" class="col-sm-offset-2" data-advance-search="S">
    Show Advance Search
    <span class="glyphicon glyphicon-chevron-down"></span>
  </a>
</div>

Answer 3

In your jQuery code change to this

jQuery('#IdAdvanceSearch').on('click', function(){
  var dh = jQuery("#IdAdvanceSearch").data('advance-search');

    if(dh === 'S'){
       jQuery("#IdAdvanceSearch").html('Hide Advance Search<span class="glyphicon glyphicon-chevron-up"></span>');
       jQuery('#IdAdvanceSearch').data('advance-search', 'H');
    }
    else if(dh === 'H'){
       jQuery("#IdAdvanceSearch").html('Show Advance Search<span class="glyphicon glyphicon-chevron-down"></span>');
       jQuery('#IdAdvanceSearch').data('advance-search', 'S');
    }
});

Here is a JSFiddle

Use jQuery html instead of jQuery text to allow insertion of glyphicon & when hide pass down icon & when show pass up icon

Answer 4

The answer is

 $('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');

There is a problem in the hierarchy of html too. Hope you are expecting this.

Put your span outside the anchor tag.

JS Fiddle