CODEWITHSUNDEEP
javascriptjquery
HiDayurie Dave
HiDayurie Dave

Reputation: 1807

jQuery toggle & remove class not correct

I have simple jQuery toggle class and remove class.

Assume I have 5 menu. Now when I click one menu then the arrow will set to down position.

Then now try to click another menu, the arrow down from previous menu is not back from the original position.

What I need is when I click one menu then click another menu then another arrow should back to the original position.

for(var i=0; i<5; i++) {
  var el = "<div class='click' style='padding: 10px; cursor: pointer;'><i class='fa-regular fa-angle-right'></i></div>";
  
  $(".menu").append(el);
}

$(".click").click(function(e) {
  $(".menu").removeClass("expanded");
    $(this).find("i").toggleClass("expanded");
});
.expanded {
  transform: rotate(90deg);
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.2/css/all.css">

<div class="menu"></div>

Upvotes: 1

Views: 54

Answers (1)

Mina
Mina

Reputation: 17099

One solution is removeClass from all i elements except the clicked one by not method.

$(".click i").not(iEle).removeClass("expanded");

Before toggleClass for clicked one.

for(var i=0; i<5; i++) {
  var el = "<div class='click' style='padding: 10px; cursor: pointer;'><i class='fa-regular fa-angle-right'></i></div>";
  
  $(".menu").append(el);
}

$(".click").click(function(e) {
  const iEle = $(this).find("i");
  $(".click i").not(iEle).removeClass("expanded");
  iEle.toggleClass("expanded");
});
.expanded {
  transform: rotate(90deg);
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.2/css/all.css">

<div class="menu"></div>

Upvotes: 2

Related Questions