What is the best way to switch between displays within an if-else statement?

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>
  &nbsp;&nbsp;&nbsp;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");
});

Answer №1

If you want to get the desired outcome, it's recommended to use the toggle function instead of toggleClass

  1. Hide the icon with the id using

    $("#u").hide();

  2. Toggle the icons with the ids -i and u

    $(".check").click(function(){
    $("#u").toggle();
    $("#i").toggle();
    });

Here is a code sample for reference:
CodePen - https://codepen.io/nagasai/pen/VojwbJ

$("#u").hide();
$(".check").click(function(){
  $("#u").toggle();
  $("#i").toggle();
});
#i {
  color: #2ECC71;
  background-color: white;
}
#u {
  color: #2ECC71;
  background-color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="reme">
  <a href="#" class="check">
    <i id="i" class="far fa-circle"></i>
    <i id="u" class="far fa-check-circle"></i>
    . 
  </a>
  &nbsp;&nbsp;&nbsp;Remember Me
</p>

Answer №2

If you are using font-awesome and want to change the style of the check icon when clicked, you can simplify your code by using just one <i> element and toggling its class with a specific selector. Here's an example:

$('.check').on('click',function(){
  $(this).find('#toggle-me').toggleClass('fa-circle fa-check-circle');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="reme">
  <a href="#" class="check">
    <i id="toggle-me" class="far fa-circle"></i>
  </a>
</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

FullCalendar Not Responding to JSON Parsing

Here is how my FullCalendar jQuery code is set up: $(document).ready(function () { $('#calendar').fullCalendar({ events: { url: '/admin/index.php', type: 'GET', data: { m: '1&apo ...

Triggering onClick without interfering with its populated variable

I'd like to add the following code snippet to my document: $('#myDiv).append("<div id='myDiv2' onclick="+extElementConfig.onClickDo+">Do</div>"); The code above uses an object with properties to populate the onClick attrib ...

Interested in learning how to filter nested tables?

After successfully integrating a filter code snippet, I encountered an issue with the filter not recognizing data tables that can only be inserted as nested tables. Due to my limited knowledge of JavaScript/CSS, I'm unsure if this problem can be resol ...

The act of resizing a window causes the text to be forcibly expelled from its containing div

When you hover over an image in a grid, text and a button appear. However, when the window is resized, the content ends up overflowing out of the div. This issue is part of my first project that I am working on during a bootcamp. I have decided to keep th ...

`There is a delay in rendering the background image on Chrome`

Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...

Maintaining Scene Integrity in THREE.JS: Tips for Handling Window Resizing

My layout includes a div with a scene that looks great initially; however, as soon as I start moving or resizing the window, the scene overflows the boundaries of the div and goes haywire, almost filling the entire window. Are there any techniques or solu ...

Is there a way to use PHP to calculate the number of lines in an HTML code?

After using a WYSIWYG-editor (WordPress) to generate HTML content, I am seeking a way to display a preview of this HTML by showing only up to 3 lines of text in HTML format. For example: <p>Hello, this is some generated HTML.</p> <ol> ...

Press the [Submit] button to conceal DIV Container 1, reveal DIV Container 2, and populate DIVs discovered in a .PHP file within DIV Container 2

Trying to achieve the following steps: 1 - Press Submit Button 2 - Conceal DIV Container 1 3 - Reveal DIV Container 2 4 - Load and display all DIVs from "PricingDisclaimer.php" into Div Container 2 DIV Code snippet: <div id="MainContainer"> &l ...

Ways to iterate through all elements using xpath

Having recently ventured into the world of xpath and HTML, I realize that I may be overlooking a key concept. In my HTML document, I am aiming to extract all the items listed below (I'm relying on scrapy for my requests; all I need is the correct xpat ...

What are some tips for incorporating vue.js into a basic web application?

I've been trying to incorporate vue.js into my web application, but for some reason, it's not loading and the HTML is not firing in the browser. Please take a look at the code snippet below: <!DOCTYPE html> <html> < ...

Navigating the complexities of applying CSS exclusively to child grids within Kendo Angular may seem challenging at first

This image illustrates the grid layout I have created an angular UI using kendo that features a nested grid. I am trying to apply CSS specifically to the child grid without affecting the parent grid. However, no matter what CSS I write, it ends up being a ...

When I apply a percentage to the height of a div element, it shrinks down to a height

I have several lists with a flex layout. Each column contains 3 list items, and the flex-basis is set to one-third. Within each li element, there is a div for a background image and another div to display text, which should be positioned below the image. ...

Can cells within an HTML table be crossed out?

I have a creative idea for an HTML table - I want to be able to cross out cells in a way that looks like the following drawing: At first, I thought about creating a CSS right triangle within the cell. But I got stuck when trying to only color the hypotenu ...

Extension for Chrome

My goal is to develop a Chrome extension that, when a specific button in the extension is clicked, will highlight the current tab. However, I'm encountering some challenges. Currently, I have document.getElementById("button").addEventListen ...

Is it advisable to avoid using `&apos;` for escaping single quotes?

According to the insights shared in conversations about the popularity of single quotes in HTML and Jquery embedded quote in attribute, the Wikipedia page on HTML highlights that: The use of the single-quote character ('), as a way to quote an attri ...

Personalize your Datatable export options with Jquery

I am working with a datatable that contains columns with data in the format 'XXXX unit'. For my export, I need to remove the 'unit' part of the data. What specific rule should I implement for this task? exportOptions: { columns: ...

What could be causing Chrome to reduce the display size in responsive mode?

My website is designed to be responsive and includes a viewport tag for mobile devices, as shown below: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> How ...

Why is the leading zero being ignored when I try to print the contents of the session in PHP?

Encountering an issue with printing the content session. The problem arises when creating the session, as the variable is initially in string format (varchar obtained from a mysql field): Initial variable: 09680040 Printed with alert or displayed in div: ...

A large responsive bootstrap website filling only half the screen

I am currently in the process of developing a simple version of a Content Management System (CMS). I have created a page that offers an HTML template, allowing users to insert their own text and image uploads to display on another screen. The template fun ...

Guide on inserting a row into a table class without unique values using jQuery

I have gathered information on stackoverflow regarding how to use jQuery to add a row to a table. $('.myTable').find('tbody:last').append('WHATEVER CODE'); Although this method seems to be effective, I have come across the i ...