CODEWITHSUNDEEP
javascriptjquery
Lucky500
Lucky500

Reputation: 507

toggle button with font awesome and jquery

I thought this was going to be simple, but I am having a bit of hard time getting this to work. I am able to toggle once using .show and .hide, but not able to toggle back.

all the help would be appreciated.

here is the code:

<div class="middle">
    <i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
    <i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div> 


$(document).ready(function(){

    $('.middle').click(function(){
        $('.inactive').show();
        $('.active').hide();

    })

    .click(function(){
        $('.inactive').hide();
        $('.active').show();

    });

});

I also have a pen of it here: http://codepen.io/lucky500/pen/qdZPLe

Upvotes: 3

Views: 9621

Answers (8)

aaeee
aaeee

Reputation: 1

css

.rotate{
     transform:rotate(180deg);
      color:black
    }

jquery

$('.fa-toggle-on').on('click',function() {
        $(this).toggleClass('rotate')
      });

Upvotes: 0

Gene Bo
Gene Bo

Reputation: 12093

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
</head>
<body>
    <i id='checkboxAbcToggle' class='far fa-square cursorIcon'></i> Show Abc
</body>

=================

$('#checkboxAbcToggle').click(function () {

    // Toaster.top('toggleClass');
    UiUx.setCheckbox('#checkboxAbcToggle');
});

let Key = {
    uncheckedSquare: 'fa-square',
    checkedSquare: 'fa-check-square',
}

let UiUx = {};
UiUx.setCheckbox = function (checkboxIcon_jqId) {

    let checkboxIconElement = $(checkboxIcon_jqId);
    let isChecked = checkboxIconElement.hasClass(Key.checkedSquare);

    if (isChecked === true) {

        checkboxIconElement.removeClass(Key.checkedSquare);
        checkboxIconElement.addClass(Key.uncheckedSquare);
    }
    else {

        checkboxIconElement.removeClass(Key.uncheckedSquare);
        checkboxIconElement.addClass(Key.checkedSquare);
    }

}

Upvotes: 0

Miguel
Miguel

Reputation: 20633

one approach is to use toggle

$(document).ready(function(){
    $('.middle').click(function() {
        $('.inactive, .active').toggle();
  });
});

http://codepen.io/miguelmota/pen/zGqPOX

Upvotes: 4

Chad
Chad

Reputation: 3237

This jQuery plugin worked well for me: https://github.com/hurkanaras/Hurkan-Switch-Plugin

An example:

$('[data-toggle="hurkanSwitch"]').hurkanSwitch({
    'width':'90px',
    'offConfirm': function(r) { return confirm('Are you sure you want to disable this?'); },
    'on': function(e) { toggle(e, 'enable'); },
    'off': function(e) { toggle(e, 'disable'); },
    'onColor': 'green',
    'offColor': 'red',
    'className': 'switch-toggle' //I changed the font size with this
});

Upvotes: 0

JMJ
JMJ

Reputation: 2152

Generally and simply it works like this: You can use this in general purposes. 

<script>
            $(document).ready(function () {
                $('i').click(function () {
                    $(this).toggleClass('fa-plus-square fa-minus-square');
                });
            });
</script>

Upvotes: 1

MichaelHuelsen
MichaelHuelsen

Reputation: 416

Rotating the fontawesome icon is a nice idea, however the browser may show some change in the vertical positioning since the icon has different transparent margins with respect to the visible pixels.

I combined the solutions of @miguel-mota and @oka.

Only one fontawesome tag is needed, the classes are switched in the on click function for the class .toggler. Make sure to use the each function to apply multiple transformations.

JS

 $('.toggler').on('click', function () {
          $(".my-button").each(function(){
            $(this).toggleClass('fa-toggle-off');
            $(this).toggleClass('fa-toggle-on');
            $(this).toggleClass('active');
          })
      });

CSS

.toggler {
  text-align: center;
  margin: 0 auto;
  padding: 2rem;
  cursor: pointer;
  color: black;
}
.active {
    color: green;
}

HTML

<div class="toggler">
  <i class="fa fa-toggle-off fa-2x inactive my-button"></i>
</div>

Upvotes: 0

Oka
Oka

Reputation: 26365

Why not simplify this a bit by using a single element with .toggleClass().

http://jsbin.com/ceyilucuya/1/edit?html,css,js,output

$('.toggler').on('click', function () {
  $(this).toggleClass('fa-rotate-180 on');
});

Upvotes: 3

Eric E
Eric E

Reputation: 592

The structure of your HTML it a little funky, however I found a dirty fix to your problem. The following code i repeat is a dirty fix, but it works.

http://codepen.io/anon/pen/MwyEdq

JS

$(document).ready(function(){
    i = 0;

    $(".fa-toggle-on").click(function() {
        if ( i == 0) {
            $('.inactive').hide();
            $('.active').show();
            i++;
        }
        else if ( i == 1) {
            $('.inactive').show();
            $('.active').hide();
            i = 0;
        }
    });

});

HTML

<div class="middle">
    <i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
    <i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>

CSS

.middle {
    text-align: center;
    margin: 0 auto;
    padding: 2rem;
}

.active {
    color: green;
}

Upvotes: 1

Related Questions