CODEWITHSUNDEEP
javascripthtmljquerybootstrap-4
Anurag
Anurag

Reputation: 61

How can I maintain collapse-state of side bar after page refresh?

In my Sidebar I have included a collapse button to show/hide tabs. Now I want to maintain the collapse-state when refreshing the page: If the form was un-collapsed before refreshing the page, it must stay like this after the refresh. I am new to js. Below is my 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">
        &nbsp;  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">&nbsp; example-1</a></li>
          <li><a href="#" class="link-dark rounded fa fa-chevron-right">&nbsp; example-2</a></li>
          <li><a href="#" class="link-dark rounded fa fa-chevron-right">&nbsp; 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">
      &nbsp;  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">&nbsp; example-1</a></li>
          <li><a href="#" class="link-dark rounded fa fa-chevron-right">&nbsp; example-2</a></li>
          <li><a href="#" class="link-dark rounded fa fa-chevron-right">&nbsp; example-3</a></li>
        </ul>
      </div>
    </li>



  </ul>
</div>

</li>
</ul>
</div>

Thanks for your help!

Upvotes: 1

Views: 1391

Answers (1)

Anurag
Anurag

Reputation: 61

After some research, i have what i required. Attaching code part herewith which maybe beneficial to others.

$(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");
    }
});

Upvotes: 2

Related Questions