Search code examples
jqueryasp.net-core

Keep accordion selection on page reload in ASP.NET Core


I am using ASP.NET Core 7.0.

I have an accordion on a page. The last section, when I add an assessment, I load up a modal form. When "Save" button is clicked, I save the data, close the modal form and reload the page so that the saved data is shown.

However, when I reload the page the first section of the accordion is selected. I would like to close that and open the section that adds the assessment.

Here is what I have tried - my accordion:

<div class="accordion" id="accEditRecord">
    <div class="accordion-item">
         <h2 class="accordion-header" id="ahPatientDemographics">
             <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#apPatientDemographics" aria-expanded="true" aria-controls="apPatientDemographics">
                 <div class="col-md-9"><span>Patient Demographics </span></div>
                 <div class="col-md"><span class="align-items-end" id="spPatientDemographicsProgress"></span>/<span class="align-items-end" id="spPatientDemographicsQuestionCount"></span> Questions complete</div>
             </button>                                                        
         </h2>
         <div id="apPatientDemographics" class="accordion-collapse collapse show" aria-label="ahPatientDemographics" data-bs-parent="#accEditRecord" role="group">                                                                    
             <div class="accordion-body">
                 @{ await Html.RenderPartialAsync("_PatientDemographics"); }
             </div>
         </div>
     </div>
     <div class="accordion-item">
         <h2 class="accordion-header" data-id="ahPersonalHistory">
             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#apPersonalHistory" aria-expanded="false" aria-controls="apPersonalHistory">
                 <div class="col-md-9"><span>Personal History</span></div>
                 <div class="col-md"><span id="spPersonalHistoryProgress"></span>/<span id="spPersonalHistoryQuestionCount"></span> Questions complete</div>
             </button>
         </h2>
         <div id="apPersonalHistory" class="accordion-collapse collapse" aria-label="ahPersonalHistory" data-bs-parent="#accEditRecord" role="group">
             <div class="accordion-body">
                 @{ await Html.RenderPartialAsync("_PersonalHistory"); }
             </div>
         </div>
      </div>
      <div class="accordion-item">
          <h2 class="accordion-header" data-id="ahAssessmentResults">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#apAssessmentResults" aria-expanded="false" aria-controls="apAssessmentResults">
                  <div class="col-md-9"><span>Assessment Results</span></div>
                  <div class="col-md"><span id="spAssessmentResultsProgress"></span>/15 Questions complete</div>
              </button>
          </h2>
          <div id="apAssessmentResults" class="accordion-collapse collapse" aria-label="ahAssessmentResults" data-bs-parent="#accEditRecord" role="group">
              <div class="accordion-body">
                  @{ await Html.RenderPartialAsync("_AssessmentResults"); }
              </div>
          </div>
      </div>
 </div> 

My jQuery code:

$(function () {
    var activeSection = sessionStorage.getItem('activeSection');
     if (activeSection) {
         //Cloase all sections
         $('.accordion').accordion("option", "active", -1);

         // Open the saved section
         $('h2[data-id="' + activeSection + '"]').next().slideDown();
     }

     //To set, which one will be opened
     $('.accordion-header').on('click', function () {
         
         let target = $(this).data('id');
         //Save data to sessionStorage
         sessionStorage.setItem('activeSection', target);
     });
});

The .accordion function does not exist is the error I get. I am using jQuery v3.6.0

Can anyone help?


Solution

  • The .accordion function is Jquery UI's function, but looks like you are using the bootstrap accordion , so you should directly set the bootstrap class by using jquery, then it will work.

    More details, you could refer to below js codes:

    <script>
        $(function () {
            var activeSection = sessionStorage.getItem('activeSection');
    
            if (activeSection) {
                // Close all accordion sections
                $('.accordion-collapse').removeClass('show');
    
                // Open the saved section
                $('#' + activeSection).addClass('show');
                $('button[data-bs-target="#' + activeSection + '"]').removeClass('collapsed').attr('aria-expanded', true);
            }
    
            // Set which one will be opened on click
            $('.accordion-header button').on('click', function () {
                let target = $(this).attr('data-bs-target').substring(1);
                // Save the target section ID to sessionStorage
                sessionStorage.setItem('activeSection', target);
            });
        });
    </script>
    

    Result:

    enter image description here