Estoy usando bootstrap 4 para crear un botón con un menú desplegable. La funcionalidad que necesito es que el botón, cuando esté cerrado, contenga la palabra abrir y un ícono de fontawesome al lado. Cuando se abre, debe decir cerrar con un ícono al lado.
Actualmente estoy intentando esto
function toggle() { const btn = document.body.querySelector("#dropdownMenu2"); if (btn.innerText == "Open") { btn.innerHTML = "<i class='fa fa-plus-circle' aria-hidden='true'></i>" + "Open"; } else { btn.innerHTML = "<i class='fa fa-minus-circle' aria-hidden='true'></i>" + "Close"; } } .dropdown-toggle { border-radius: 0; border-style: solid; border-color: #9d2235; background-color: #9d2235; color: #fff; padding: 8px 20px; } <button class="dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="toggle()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> Actions </button>El botón cambia para cerrarse con el primer clic, pero nunca vuelve a cambiar para abrirse cuando se vuelve a hacer clic.
en lugar de tratar de alterar el dom . ¿Por qué no agrega un segundo botón con detalles exactos y luego agrega la misma clase en ambos botones y usa jquery (ya que bootstrap 4 usa jquery) para ocultar y mostrar otros como los siguientes?
$('.buttonClass').toggle();