I've been struggling to toggle the circle on click to reveal the checkmark and hide the circle. I've already implemented the hover effect in CSS where the circle disappears and the checkmark appears.
HTML
<p class="reme">
<a href="#" class="check">
<i id="i" class="far fa-circle"></i>
<i id="u" class="fas fa-check-circle"></i>
.
</a>
Remember Me
</p>
CSS
#i {
color: #2ECC71;
background-color: white;
}
#u {
color: #2ECC71;
background-color: white;
}
/*
.check:hover #i,
.check #u {
display: none;
}
.check:hover #u {
display: inline;
}
*/
JQUERY
/*
$(".check").click(function(){
if ( $(".check").hasClass("fa-circle") {
$(".check").removeClass("fa-circle");
} else {
$(".check").toggleClass("fa-check-circle fa-circle");
}
});
$(".check").click(function() {
if ( $( this ).find('i').hasClass( "fa-circle" ) ) {
$( this ).find('i').removeClass( "fa-circle" );
$( this ).find('i').addClass( "fa-circle-check" );
} else {
$( this ).find('i').removeClass( "fa-circle-check" );
$( this ).find('i').addClass( "fa-circle" );
}
});
*/
$(".check").click(function(){
$(".check").toggleClass("fa-circle fa-circle-check");
});
$(".check").click(function(){
$(".check").show("fa-circle-check");
});
$(".check").hasClass(function(){
$(".check").hide("fa-circle-check");
});