Estoy trabajando en un proyecto php secundario y me pregunto cómo puedo modificar mi código para que solo haya un botón en lugar de dos.
En este momento, tengo botones para mostrar y ocultar. Estoy pensando en tener solo un botón y mostrará primero la opción Ocultar. después de que un usuario haga clic en la opción Ocultar, la cambiará para mostrar.
<button type="button" class="btn btn-light" onClick="hide_div('transpose-keys');">Hide</button> <button type="button" class="btn btn-light" onClick="show_div('transpose-keys');">Show</button> function hide_div(e) { $(".c").hide() $("."+e).hide() } function show_div(e) { $(".c").show() $("."+e).show() }{ display: none } . setHiddable("hide-show", "target"); /** * Ideal to set a hide/show relationship between only two elements * @param {string} btnId The ID of the button that toggle the view * @param {string} elementId The ID of the element to be toggled */ function setHiddable(btnId, elementId) { const btn = document.querySelector(`#${btnId}`); // Listen to clicks btn.addEventListener("click", (ev) => { const targetEl = document.querySelector(`#${elementId}`); // Hide if shown // Show if hidden targetEl.classList.toggle("hidden"); }); } #target { height: 100px; width: 100px; background: red; } .hidden{ display: none; } <div id="target"> This is the element that you want to show and hide on click </div> <button type="button" class="btn btn-light" id="hide-show">TOGGLE VIEW</button>