Toggle changed button class

Question

I want to create a toggle button where will change button class from class="fa fa-toggle-off" to class="fa fa-toggle-on" when clicked.

<button class="btn btn-default" id="btn" name="btn"><i id="change" class="fa fa-toggle-off"></i></button>

I create the javascript below, however it changed the button style="display:none" instead change its class.

       $(function() {
          $('#btn').click(function(e) {
            e.preventDefault();

            var display = true,
                image   = 'details_close.png';

            if ($('.td1:visible').length == $('.td1').length) { 
              display = false;
              image   = 'details_open.png';
            }

            $('.td1').toggle(display);

            $("#change").toggle(function() 
            {
                    $('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
            }, function() {
                    $('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
            });
          });
        });

Are you sure there aren't any other events firing at the same time? — kchason
– kchason, Commented Mar 12, 2019 at 10:33
Isn’t jQuery’s .toggle() actually toggling the visibility (via CSS’ display attribute) of elements and thus the cause of this behavior? — dulange
– dulange, Commented Mar 12, 2019 at 10:36
Actually the button is used to toggle the table child row. And i want make the toggle button icon changed when clicked — Ichida
– Ichida, Commented Mar 12, 2019 at 10:37
In the code given you set up a listener each time a button is clicked; this is obviously wrong. What you actually should use is api.jquery.com/toggleclass — raina77ow
– raina77ow, Commented Mar 12, 2019 at 10:39

Bambou · Accepted Answer · 2019-03-12 10:48:52Z

2

There you go, I used toggleClass (http://api.jquery.com/toggleclass/) function to toggle the class when you click your button, it'll disabled this class fa-toggle-off and activate this class fa-toggle-on on click (https://api.jquery.com/click/) and vice versa.

$(document).ready(function(){
  $("#btn").click(function() {
     $("#change").toggleClass("fa-toggle-off fa-toggle-on");
  });
});

.fa-toggle-off {
  background-color: #F00;
}

.fa-toggle-on {
  background-color: #0F0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" id="btn" name="btn">
  Button <i id="change" class="fa fa-toggle-off">AAA</i>
</button>

Beware, in your code you're checking if #change is clicked, the button got #btn ID attribute. Wish I helped you.

answered Mar 12, 2019 at 10:48

Bambou

1,0771 gold badge12 silver badges26 bronze badges

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

Comments

Nivethi Mathan · Accepted Answer · 2019-03-12 10:48:36Z

1

You can use .toggleClass to add or remove class alternatively

$(document).ready(function() {
  $("#btn").click(function() {
    $("#change").toggleClass("fa-toggle-on");
  });
});

.fa-toggle-off {
  color: red;
}

.fa-toggle-on {
  color: blue;
}

.btn-default {
  display: block;
  width: 200px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" id="btn" name="btn"><i id="change" class="fa fa-toggle-off">Hello my button</i></button>

answered Mar 12, 2019 at 10:48

Nivethi Mathan

1051 silver badge8 bronze badges

Comments

Rohit Mittal · Accepted Answer · 2019-03-12 18:46:46Z

0

You can check if on/off class exist and then can remove existing class & add new class as below code:

$(function() {
    $('#btn').click(function(e) {
        e.preventDefault();

        var display = true,
            image   = 'details_close.png';

        if ($('.td1:visible').length == $('.td1').length) { 
          display = false;
          image   = 'details_open.png';
        }

        $('.td1').toggle(display);

        if ($("#change").hasClass("fa-toggle-off")) 
        {
            $('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
        } else {
            $('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
        });
    });
});

Hope it helps you.

answered Mar 12, 2019 at 18:46

Rohit Mittal

2,1142 gold badges12 silver badges21 bronze badges

Collectives™ on Stack Overflow

Toggle changed button class

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related