using jquery with bootsrap4 and accordion
I am using an accordion menu, and at the moment the last level is the question, the two levels above it are sections and then categories at the top.
Everything is fine, but what I want to do at this stage is detect if they go to the question level and open it, but then rather than close it they click another section instead.
So if they do on clicking on any other button it closes the question accordion.
This is how my question level is set up
- <div id="accordionQuestion@(Model.QuestionID)">
<div class="card">
<div class="card-header" id="headingQuestion@(Model.QuestionID)">
<h5 class="mb-0">
<button class="btn btn-link question" data-toggle="collapse" data-target="#clpQuestion@(Model.QuestionID)" aria-expanded="false" aria-controls="clpQuestion@(Model.QuestionID)">
@(Model.DisplayOrder). @Model.Question
</button>
</h5>
</div>
<div id="clpQuestion@(Model.QuestionID)" class="collapse" aria-labelledby="headingQuestion@(Model.QuestionID)" data-parent="#accordionSection@(ViewData["categoryID"])">
<div class="card-body">
@Html.Partial("~/Views/Questionnaire/_QuestionnaireAnswer.cshtml", Model.AnswerModel, new ViewDataDictionary { { "recordID", @ViewData["recordID"] } })
</div>
</div>
</div>
</div>
and this is the jscript im using, and again all works fine, and the question class aria-expanded value does get set to 'false' but it doesnt actually physically close the button up.
- $(function () {
$('button').on('click', function (e) {
if ($('.question').attr('aria-expanded') === 'true') {
//alert("2. save answer to db of question left open and close it");
var x = $('.question').attr('aria-expanded');
alert(x + "1");
if (x == 'true') {
$('.question').attr('aria-expanded', 'false');
}
} else {
var x = $('.question').attr('aria-expanded');
alert(x + "2");
}
});
});