how to replace the "fa-angle-left" icon with "fa-angle-down" when you click on it?
<li class="has-sub">
<a class="js-arrow" href="#"><i class="fas fa-user"></i>Users<i class="pull-right fas fa-angle-left"></i></a>
<ul class="list-unstyled navbar__sub-list js-sub-list">
<li><a href="<?=ADMIN;?>/user">User List</a></li>
<li><a href="<?=ADMIN;?>/role">Roles</a></li>
</ul>
</li>You can check for one class using classList.contains and replace it, using classList.replace based on the result of check .
(classList returns DOMTokenList)
let pr = document.querySelector(".pull-right");
pr.addEventListener("click", () => {
if (pr.classList.contains("fa-angle-left")) {
pr.classList.replace("fa-angle-left", "fa-angle-right");
}
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<ul>
<li class="has-sub">
<a class="js-arrow" href="#"><i class="fas fa-user"></i>Users<i class="pull-right fas fa-angle-left"></i></a>
<ul class="list-unstyled navbar__sub-list js-sub-list">
<li><a href="<?=ADMIN;?>/user">User List</a></li>
<li><a href="<?=ADMIN;?>/role">Roles</a></li>
</ul>
</li>
</ul>If you want to toggle between left and right icon, you need to add else part to the if condition.
let pr = document.querySelector(".pull-right");
pr.addEventListener("click", () => {
if (pr.classList.contains("fa-angle-left")) {
pr.classList.replace("fa-angle-left", "fa-angle-right");
} else {
pr.classList.replace("fa-angle-right", "fa-angle-left");
}
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<ul>
<li class="has-sub">
<a class="js-arrow" href="#"><i class="fas fa-user"></i>Users<i class="pull-right fas fa-angle-left"></i></a>
<ul class="list-unstyled navbar__sub-list js-sub-list">
<li><a href="<?=ADMIN;?>/user">User List</a></li>
<li><a href="<?=ADMIN;?>/role">Roles</a></li>
</ul>
</li>
</ul>