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?
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: