JavaScript - 更改 class 名称

Question

enter link description here

In my JSFiddle - my problem is

How I toggle and change class in the same time?

normal show "<" when click menu toggle and it show ">".

Answer 1

You can check if class is present in classlist and render icon accordingly

 function togglesidebar() { document.getElementById("mySidebar").classList.toggle('active'); const isActive = document.getElementById("mySidebar").classList.contains('active') document.getElementById("changeclass").className = `fa fa-chevron-${isActive? 'right': 'left'}`; }

 #mySidebar.active { right: 0px; width: auto; height: auto; transition: all 0.5s linear; } #mySidebar.active { right: 0px; width: auto; height: auto; transition: all 0.5s linear; } #mySidebar { position: absolute; top: 30%; right: -7%; /* width: 100px; height: 200px; */ width: 8.333333%; /* 100/1200 */ /* 100/1200 */ height: auto; opacity: 0.7; background-color: green; } #mySidebar #btn4 { top: 30%; } #btn4 { position: absolute; top: 40%; right: 95%; font-size: 100%; border-radius: 100%; padding: 10px; border: none; outline: none; background-color: green; z-index: 3; }

 <script src="https://kit.fontawesome.com/a076d05399.js"></script> <div id="mySidebar"> <button id="btn4" onclick="togglesidebar()"> <span id="changeclass" class="fa fa-chevron-left"></span> </button> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div>

Answer 2

Just toggle both classes to change it

function togglesidebar() {
    document.getElementById("mySidebar").classList.toggle('active')
    document.getElementById("changeclass").classList.toggle("fa-chevron-right");
    document.getElementById("changeclass").classList.toggle("fa-chevron-left");
}