Font toggle button awesome and jquery
I thought it was going to be simple, but I am a little difficult to get this to work. I can switch once with .show and .hide, but I cannot switch back.
all 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 here: http://codepen.io/lucky500/pen/qdZPLe
source to share
Why not simplify this a bit by using a single s .toggleClass()
.
http://jsbin.com/ceyilucuya/1/edit?html,css,js,output
$('.toggler').on('click', function () {
$(this).toggleClass('fa-rotate-180 on');
});
source to share
The structure of your HTML is a bit funky, however I found a dirty solution to your problem. The following code that 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;
}
source to share
Typically, it works like this: You can use it for general purposes.
<script>
$(document).ready(function () {
$('i').click(function () {
$(this).toggleClass('fa-plus-square fa-minus-square');
});
});
</script>
source to share
Rotating the fontovesome icon is a good idea, however the browser may show some change in vertical positioning as the icon has different transparent margins relative to the pixels it sees.
I have combined @ miguel-mota and @oka solutions.
Only one fontoreesome tag is required, the classes are included in the on click function for the .toggler class. Be sure to use each function to apply multiple transforms.
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>
source to share
This jQuery plugin worked great for me: https://github.com/hurkanaras/Hurkan-Switch-Plugin
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
});
source to share
<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);
}
}
source to share