Jquery for change dropdown icon box after clicked

Question

I create a click event but that event affects both dropdown i want do one by one, also i would like when I click in the next dropbox the first icon back to place, does not matter if i click in the first or second always puting back the icon that is my html and jquery : http://jsfiddle.net/rtu1tzep/

html:

    <div class="body-title">
        title
    </div>

    <div class="form-group">
        <div class="col-md-16">
      <button type="button" class="btn btn-lg dropdown-toggle btn_body" data-toggle="dropdown" aria-expanded="false">
      <span id="users_label">users</span><i class="glyphicon glyphicon-asterisk"></i></button>
        </div>
    </div>

    <div class="form-group">
       <div class="col-md-16">
        <button type="button" class="btn btn-lg dropdown-toggle btn_body" data-toggle="dropdown">
     <span id="clients_label">clients</span>
    <i class="glyphicon glyphicon-asterisk"></i>

             </div>
        </div>

</div>

jquery:

  $( ".btn_body" ).click(function(){
    $('i').removeClass('glyphicon-asterisk');
    $('i').addClass('glyphicon-star');
  });

You are not working on the specific clicked icon, you are applying changes on the class selector. check this fiddle https://jsfiddle.net/rtu1tzep/1/ — Vinay Pratap Singh Bhadauria, Sep 08 '15 at 08:52
looks perfect thank you, but how can I put back the icon if I click in other dropdown — raduken, Sep 08 '15 at 09:00

Lalji Tadhani · Answer 1 · 2015-09-08T09:13:08.640

1

Change your Jquery.

$(".btn_body").click(function () {
        $('.btn_body').find('i').addClass('glyphicon-asterisk');
        $('.btn_body').find('i').removeClass('glyphicon-star').css('color', '');
        $(this).find('i').removeClass('glyphicon-asterisk');
        $(this).find('i').addClass('glyphicon-star').css('color', 'red');
    });

edited Sep 08 '15 at 09:13

answered Sep 08 '15 at 08:53

Lalji Tadhani

14,041
3
23
40

Thanks very much, works well, but how can i put back the icon when i click in other dropdown? – raduken Sep 08 '15 at 08:56
1

check now change jquery – Lalji Tadhani Sep 08 '15 at 09:00
thanks a lot for the help, its working, i gave you some points – raduken Sep 08 '15 at 10:16
1

$(this).find('span').css('color', 'red'); – Lalji Tadhani Sep 08 '15 at 10:35
very nice its works :), i just got a problem now, if i click on dropdown and after i click i another part of the page the icon still the same, how the icon can back to the original? – raduken Sep 08 '15 at 10:43
$('.btn_body').find('span').css('color', ''); – Lalji Tadhani Sep 08 '15 at 10:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89056/discussion-between-raduken-and-lalji-tadhani). – raduken Sep 08 '15 at 10:48

score 1 · Answer 2 · answered Sep 08 '15 at 08:58

This is what you want I think.

$( ".btn_body" ).click(function(){
  $('i').removeClass('glyphicon-star');
  $('i').addClass('glyphicon-asterisk');
  $(this).children('i').removeClass('glyphicon-asterisk');
  $(this).children('i').addClass('glyphicon-star');
});

score 1 · Accepted Answer · answered Sep 08 '15 at 08:59

1

Demo

  $(".btn_body").click(function () {
      $(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star');
      if ($(".btn_body").not(this).find("i").hasClass("glyphicon-star")) {
          $(".btn_body").not(this).find("i").toggleClass('glyphicon-asterisk glyphicon-star');
      }
  });

answered Sep 08 '15 at 08:59

Vinay Pratap Singh Bhadauria

9,829
3
28
49

1

@Raduken we are here to help :). – Vinay Pratap Singh Bhadauria Sep 08 '15 at 09:02
how can i change the colour of the star? its possible too? – raduken Sep 08 '15 at 09:02
1

@Raduken that depends, how is the star coming? if from an image you have to change the image used in the css class – Vinay Pratap Singh Bhadauria Sep 08 '15 at 09:04
coming from a bootstrap class called: .glyphicon :) – raduken Sep 08 '15 at 09:06
1

then an image is used, most probably a sprite, check out this SO post http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css – Vinay Pratap Singh Bhadauria Sep 08 '15 at 09:07
1

check my answer with color change – Lalji Tadhani Sep 08 '15 at 09:15
@vinay , can we say for the class: glyphicon-star be white? changing the color attribute?, its just what i need :) – raduken Sep 08 '15 at 09:24
1

yes the stack over flow i mentioned states that in bootstrap 3, the icons are basically fonts, so you can change the color by using the Css color property. @LaljiTadhani has done the same in his answer. – Vinay Pratap Singh Bhadauria Sep 08 '15 at 09:26
nice thanks all, I updated the jsfiddle, but last question how can i change the color of the span element too? :) https://jsfiddle.net/rtu1tzep/7/ – raduken Sep 08 '15 at 10:23

score 1 · Answer 4 · answered Sep 08 '15 at 09:11

1

Try this

$( ".btn_body" ).click(function(){
$('i').removeClass('glyphicon-star');
$('i').addClass('glyphicon-asterisk');
$(this).children('i').removeClass('glyphicon-asterisk');
$(this).children('i').addClass('glyphicon-star');
});

answered Sep 08 '15 at 09:11

Tal

1,091
12
25

Jquery for change dropdown icon box after clicked

4 Answers4

Demo