Bootstrap4 accordion, closing down section on click elsewhere

HTML & CSS
1

I posted this problem in the jquery forum first and I think really this is a css issue even though I’m using jscript to try and achieve what I’m doing.

The accordion works fine, very happy with that but what I have been asked to do is when the user drills down to the last option in the accordion sequence, and opens that last section up to reveal the questions.

With it open if they then click a different part of the accordion to go into a new section I need to close that previous question that was left open, as eventually it will also automatically save the answer to the db.

Here is a snippet of the source to show the accordion and then jscript Im using, but I’m getting odd results, where it will close the one that was open but open another question. Then if I open the question and close it myself, then open it again and move to a new section it ignores my jscript to try and collapse it again.

The issue is - $(‘.question2’).collapse();

It seems to work once, but then doesn’t work when you carry on clicking around and opening and closing other levels.

<div id="accordionSection2">
    <div class="card">
        <div class="card-header" >
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#clpSection2" aria-expanded="false" aria-controls="clpSection2">
                    First Section
                </button>
            </h5>
        </div>

        <div id="clpSection2" class="collapse" aria-labelledby="headingSection2" data-parent="#accordionCategory2">
            <div class="card-body">
<div id="accordionQuestion4">
    <div class="card">
        <div class="card-header" id="headingQuestion4">
            <h5 class="mb-0">
                <button class="btn btn-link question" data-toggle="collapse" data-target="#clpQuestion4" aria-expanded="false" aria-controls="clpQuestion4">
                    1. One
                </button>
            </h5>
        </div>

        <div id="clpQuestion4" class="collapse question2" aria-labelledby="headingQuestion4" data-parent="#accordionSection2">
            <div class="card-body">
               <form action="/en/Questionnaire/SubmitAnswer" class="questionForm" data-ajax="true" data-ajax-method="POST" data-ajax-success="ProcessAjaxFormResponse" id="frmQuestion4" method="post"><input data-val="true" data-val-number="The field QuestionID must be a number." data-val-required="The QuestionID field is required." id="QuestionID" name="QuestionID" type="hidden" value="4" /><input data-val="true" data-val-number="The field Int64 must be a number." data-val-required="The Int64 field is required." id="recordID" name="recordID" type="hidden" value="1" />    <div class="questionAnswerWrapper">
        <input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID4" name="ChoiceID" type="hidden" value="7" />
            <button type="button" id="btnQ4C7" class="choice-btn btn btn-info active" data-choice-id="7" data-question-id="4" data-model-field=#hdnChoiceID4>Yes</button>
            <button type="button" id="btnQ4C8" class="choice-btn btn btn-info " data-choice-id="8" data-question-id="4" data-model-field=#hdnChoiceID4>Maybe</button>
            <button type="button" id="btnQ4C9" class="choice-btn btn btn-info " data-choice-id="9" data-question-id="4" data-model-field=#hdnChoiceID4>No</button>
    </div>
</form>
            </div>
        </div>
    </div>
</div>

jscript

    $(function () {
        $('button').on('click', function (e) {
            if ($('.question').attr('aria-expanded') === 'true') {
                var x = $('.question').attr('aria-expanded'); 
                if (x == 'true') {
                    $('.question2').collapse();
                }
            } else {

            }
        });
    });

and I have this function that works fine, when I open the question and then close it I get the alert every time, so that works really well

$(function () {
        $('.question').on('click', function (e) {
            var menuItem = $(e.currentTarget);
            if (menuItem.attr('aria-expanded') === 'true') {
                alert("1. save answer to db and close question button");
            } else {
                
            }
        });
    });
3

Ive got it to this situation, and its nearly there as it closes the question if its open after i move away to a new section.

But the one problem I have is that then when i return to a question it calls the .question on click function when i click it to open rather then when I go to close the question I have opened.

function setQuestionFalse() {
        $('.question').attr('aria-expanded', 'true');
    }

    $(function () {
        $('.question').on('click', function (e) {
            var menuItem = $(e.currentTarget);
            if (menuItem.attr('aria-expanded') === 'true') {
                alert("1. save answer to db and close question button");
            } else {
                
            }
        });
    });

    $(function () {
        $('button').on('click', function (e) {
            if ($('.question').attr('aria-expanded') === 'true') {
                var x = $('.question').attr('aria-expanded'); 
                if (x == 'true') {
                    $('.question2').collapse('hide');
                    setQuestionFalse();
                }
            } else {

            }
        });
    });
4

I think I have it with this, but wondering if the code looks right to people, and have added comments where I save to the db using c# inside some of the if statements.

function setQuestionFalse() {
        $('.question').attr('aria-expanded', 'false');
        $('.question2').collapse('hide');
    }

    function setQuestionFalseSaveDB() {
        // set save to db code here
        setQuestionFalse()
    }

    $(function () {
        $('.question').on('click', function (e) {
            var menuItem = $(e.currentTarget);
            if (menuItem.attr('aria-expanded') === 'true') {
                setQuestionFalseSaveDB()
            } else {
                setQuestionFalse()
            }
        });
    });

    $(function () {
        $('button').on('click', function (e) {
            if ($('.question').attr('aria-expanded') === 'true') {
                var x = $('.question').attr('aria-expanded');
                if (x == 'true') {
                    setQuestionFalseSaveDB()
                } else {
                    setQuestionFalse()
                }
            } else {
                setQuestionFalse()
            }
        });
    });
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.