Question 66359 in Html Question posted in
Some basic documentation can be found here.

Create two states for the click event – Html

I want to change its state by clicking on the icon and return it to the previous state by clicking again.
With the first click, the mode I want is activated, but with the second click, no change is made.

Is there a way to define multiple states for the click event instead of one?

The code I wrote is as follows:

let icon = document.querySelector(".test");

icon.addEventListener("click", function() {
  if (this.classList.contains("fa-circle-chevron-down")) {
    $(icon).addClass("add");
  } else {
    $(icon).removeClass("add");
  }
})
.test {
  position: relative;
  top: 15px;
  left: 25px;
  font-size: 50px;
  color: #6229ff;
  cursor: pointer;
}

.add {
  transform: rotate(180deg);
  color: #ff3d29 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="fas fa-circle-chevron-down test"></div>
Tags:

2

Answers


  1. 0

    use helper variable for example:

    let icon = document.querySelector(".test");
let state = "down";
    
icon.addEventListener("click", function () {
    if (state === "down") {
        $(icon).addClass("add");
        state = "up";
    } else if (state === "up") {
        $(icon).removeClass("add");
        state = "down";
    }
});
    Login or Signup to reply.
  2. 0

    Use classList.toggle() to alternate a class.

    let icon = document.querySelector(".test");

icon.addEventListener("click", function() {
  if (this.classList.contains("fa-circle-chevron-down")) {
    this.classList.toggle("add");
  }
})
    .test {
  position: relative;
  top: 15px;
  left: 25px;
  font-size: 50px;
  color: #6229ff;
  cursor: pointer;
}

.add {
  transform: rotate(180deg);
  color: #ff3d29 !important;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="fas fa-circle-chevron-down test"></div>

    Another option is to alternate between two classes, to get different chevron characters from FontAwesome.

    let icon = document.querySelector(".test");

icon.addEventListener("click", function() {
  this.classList.toggle("fa-circle-chevron-down");
  this.classList.toggle("fa-circle-chevron-up");
})
    .test {
  position: relative;
  top: 15px;
  left: 25px;
  font-size: 50px;
  color: #6229ff;
  cursor: pointer;
}

.fa-circle-chevron-up {
  color: #ff3d29 !important;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="fas fa-circle-chevron-down test"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search