title: Accordion save opened card and open it after postback
body: <p>Well, after whole day of struggling with this, searching for examples how people did this, I could not get it to working state...</p>
  
  <p>I am using ASP.NET (C#) with Bootstrap 4.4 Accordion, which is working fine (showing divs when clicked on card header).</p>
  
  <p>But I could not get to work persistent state of showed card. I am showing by default first card with it's content, when user enters page. But when he goes through cards, and some checkbox, or something causes postback, then the default state is loaded.</p>
  
  <p>I am trying to save card header ID when it is clicked, and if card-body causes postback, retrive value of hidden field, and show last opened card. </p>
  
  <p>Any help is highly appreciated cause I am not so familiar with javascript/jquery.</p>
  
  <p>Thank you.</p>
  
  <pre><code>&lt;asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"&gt;
  &lt;script src="/Scripts/jquery-3.4.1.js"&gt;&lt;/script&gt;
  
  &lt;asp:HiddenField ID="hfAccordionIndex" runat="server" /&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="accordion" id="accordionSetup"&gt;
          &lt;h2 class="mb-3"&gt;Accordion&lt;/h2&gt;
          &lt;div class="card shadow mb-2"&gt;
              &lt;div class="card-header" id="headingOne" style="transform: rotate(0);"&gt;
                  &lt;a class="collapsed card-title text-dark stretched-link" id="linkOne" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne" data-target="#collapseOne" href="#collapseOne"&gt;
                   First Link
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="collapseOne" class="collapse show" data-parent="#accordionSetup"&gt;
                  &lt;div class="card-body"&gt;
                      Something in body
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="card shadow mb-2"&gt;
          &lt;div class="card-header" id="headingTwo" style="transform: rotate(0);"&gt;
              &lt;a class="collapsed card-title text-dark stretched-link" id="linkTwo" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo" data-target="#collapseTwo" href="#collapseTwo"&gt;
               Second link
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="collapseTwo" class="collapse" data-parent="#accordionSetup"&gt;
              &lt;div class="card-body"&gt;
                  Something in body
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="card shadow mb-2"&gt;
          &lt;div class="card-header" id="headingThree" style="transform: rotate(0);"&gt;
              &lt;a class="collapsed card-title text-dark stretched-link" id="linkThree" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree" data-target="#collapseThree" href="#collapseThree"&gt;
                Third link
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="collapseThree" class="collapse" data-parent="#accordionSetup"&gt;
              &lt;div class="card-body"&gt;
                  Something in body
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var last = $("#input[id=hfAccordionIndex]").val();
  
          if (last != null) {
              $(last).find('.collapse').addClass('show');
          }
  
          $("#linkOne").click(function () {
              $("#input[id=hfAccordionIndex]").val("headingOne");
          });
          $("#linkTwo").click(function () {
              $("#input[id=hfAccordionIndex]").val("headingTwo");
          });
          $("#linkThree").click(function () {
              $("#input[id=hfAccordionIndex]").val("headingThree");
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>