En mi barra lateral, he incluido un botón de colapso para mostrar/ocultar pestañas. Ahora quiero mantener el estado de colapso al actualizar la página: si el formulario no estaba colapsado antes de actualizar la página, debe permanecer así después de la actualización. Soy nuevo en js. A continuación se muestra mi HTML:
<div class="sidebar"> <li class="mb-1"> <button class="btn btn-toggle align-items-center fa fa-database" data-bs-toggle="collapse" data-bs-target="#button-1-collapse" aria-expanded="true"> Button-1 </button> <div class="collapse" id="button-1-collapse" style=""> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 "> <li><a href="#" class="link-dark rounded fa fa-chevron-right"> example-1</a></li> <li><a href="#" class="link-dark rounded fa fa-chevron-right"> example-2</a></li> <li><a href="#" class="link-dark rounded fa fa-chevron-right"> example-3</a></li> </ul> </div> </li> <li class="mb-1"> <button class="btn btn-toggle align-items-center fa fa-file-code-o" data-bs-toggle="collapse" data-bs-target="#button-2-collapse" aria-expanded="true"> Button-2 </button> <div class="collapse" id="button-2-collapse" style=""> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 "> <li><a href="{% url 'link' %}" class="link-dark rounded fa fa-chevron-right"> example-1</a></li> <li><a href="#" class="link-dark rounded fa fa-chevron-right"> example-2</a></li> <li><a href="#" class="link-dark rounded fa fa-chevron-right"> example-3</a></li> </ul> </div> </li> </ul> </div> </li> </ul> </div>¡Gracias por tu ayuda!
Después de algunas investigaciones, tengo lo que necesitaba. Adjunto una parte del código que puede ser beneficiosa para otros.
$(function () { const buttonCollapse1 = $("#button-1-collapse"); const buttonCollapse2 = $("#button-2-collapse"); buttonCollapse1.on("shown.bs.collapse", function () { sessionStorage.setItem("buttonCollapse1", "show"); }); buttonCollapse2.on("shown.bs.collapse", function () { sessionStorage.setItem("buttonCollapse2", "show"); }); buttonCollapse1.on("hidden.bs.collapse", function () { sessionStorage.setItem("buttonCollapse1", "hide"); }); buttonCollapse2.on("hidden.bs.collapse", function () { sessionStorage.setItem("buttonCollapse2", "hide"); }); const button1 = sessionStorage.getItem("buttonCollapse1"); if (button1 === "show") { buttonCollapse1.collapse("show"); } else { buttonCollapse1.collapse("hide"); } const button2 = sessionStorage.getItem("buttonCollapse2"); if (button2 === "show") { buttonCollapse2.collapse("show"); } else { buttonCollapse2.collapse("hide"); } });