Tenho a seguinte linha:
<li id="fecharMenu">
<i class="mdi mdi-window-close mdi-24px" id="iconFecharMenu"></i>
<a href="#"></a>
</li>
Quando o usuário clicar na <li id="fecharMenu">
, o menu fecha e eu gostaria que trocasse o icone e consequentemente, o id da <li>
do <i>
, ficando assim:
<li id="abrirMenu">
<i class="mdi mdi-menu mdi-24px" id="iconAbrirMenu"></i>
<a href="#"></a>
</li>
JavaScript que eu tenho atualmente, ele "fecha" o menu apenas, gostaria de trocar o icone e o id da li e do icon também, pra ai poder criar um evento ao clicar no botão de abrir o menu:
document.getElementById("fecharMenu").addEventListener("click", fecharMenu);
function fecharMenu() {
document.getElementById("barraLateral").style.width = "60px";
}
Como eu poderia fazer somente com JavaScript, sem usar Jquery?
<i class="mdi mdi-menu mdi-24px" id="iconAbrirMenu"></i>
. É icone do Material Design Icons.