Calling collapse manually doesn't trigger at certain times

user_126833 0
Viewed 39

On clicking I Agree, the current panel collapses and the next panel opens.

But let's say you click on Menu Item 3 and then Menu Item 4 and then back to Menu Item 3 and click I Agree, Menu Item 3 collapses as usual but Menu Item 4 doesn't show up when it should.

Any idea why this is wrong ?

document.addEventListener('DOMContentLoaded', (event) =>
{            
    $('#agreements-1,#agreements-2,#agreements-3,#agreements-4,#agreements-5,#agreements-6').on("change", function(e)
    {                
        let currentIndex = parseInt(e.target.id.slice(-1));
        console.log("currentIndex = " + currentIndex);                

        $("#collapse-" + currentIndex).collapse('hide');
        $("#collapse-" + (currentIndex + 1)).collapse('show');

    });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>        

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">

    <div class="panel panel-default" id="panel-1">
        <div class="panel-heading" role="tab" id="heading-1">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
                    Menu Item 1
                </a>                                
            </h4>
        </div>
        <div id="collapse-1" class="panel-collapse collapse in" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="agreements-1" id="agreements-1" />
                        I Agree
                    </label>
                </div>
            </div>
        </div>                        
    </div>

    <div class="panel panel-default" id="panel-2">
        <div class="panel-heading" role="tab" id="heading-2">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">
                    Menu Item 2
                </a>
            </h4>
        </div>
        <div id="collapse-2" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                                    
                </div>
                <div class="radio text-left">
                    <label>
                        <input type="radio" name="agreements-2" id="agreements-2" />
                        I Agree
                    </label>
                </div>                                
            </div>
        </div>
    </div>

    <div class="panel panel-default" id="panel-3">
        <div class="panel-heading" role="tab" id="heading-3">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">
                    Menu Item 3
                </a>
            </h4>
        </div>
        <div id="collapse-3" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="radio text-left">
                    <label>
                        <input type="radio" name="agreements-3" id="agreements-3" />
                        I Agree
                    </label>
                </div>                                
            </div>
        </div>
    </div>

    <div class="panel panel-default" id="panel-4">
        <div class="panel-heading" role="tab" id="heading-4">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4">
                    Menu Item 4
                </a>
            </h4>
        </div>
        <div id="collapse-4" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="radio text-left">
                    <label>
                        <input type="radio" name="agreements-4" id="agreements-4" />
                        I Agree
                    </label>
                </div>                                
            </div>
        </div>
    </div>

    <div class="panel panel-default" id="panel-5">
        <div class="panel-heading" role="tab" id="heading-5">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5">
                    Menu Item 5
                </a>
            </h4>
        </div>
        <div id="collapse-5" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="radio text-left">
                    <label>
                        <input type="radio" name="agreements-5" id="agreements-5" />
                        I Agree
                    </label>
                </div>                                
            </div>
        </div>
    </div>

    <div class="panel panel-default" id="panel-6">
        <div class="panel-heading" role="tab" id="heading-6">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6">
                    Menu Item 6
                </a>
            </h4>
        </div>
        <div id="collapse-6" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="radio text-left">
                    <label>
                        <input type="radio" name="agreements-6" id="agreements-6" />
                        I Agree
                    </label>
                </div>                                
            </div>
        </div>
    </div>

</div>

collapse twitter-bootstrap-3 javascript
1 Answers

It's hard for me to describe but it has to do with the built-in behavior (being used) of only one panel being open at a time conflicting with the near instantaneous execution of the statements in your script, while one or the other is being animated into a collapsed or uncollasped state.

Likely the property in the panel internally for "collapsed" or "uncollapsed" is set when the animation is complete.

(RESCINDED: "As such this SOLUTION uses a callback to execute your javascript to get the desired behavior.")

Instead of the callback, let the plugin handle the behavior by sending a click event via jquery to the next panel as if the user did it.

document.addEventListener('DOMContentLoaded', (event) =>
{            
    $('#agreements-1,#agreements-2,#agreements-3,#agreements-4,#agreements-5,#agreements-6').on("change", function(e)
    {                
        let currentIndex = parseInt(e.target.id.slice(-1));
        console.log("currentIndex = " + currentIndex);                

        // EDIT CHANGES FOLLOWS:
        
        $("#panel-" + (currentIndex + 1)).find("a").click();

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>        

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">

    <div class="panel panel-default" id="panel-1">
        <div class="panel-heading" role="tab" id="heading-1">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
                    Menu Item 1
                </a>                                
            </h4>
        </div>
        <div id="collapse-1" class="panel-collapse collapse in" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="agreements-1" id="agreements-1" />
                        I Agree
                    </label>
                </div>
            </div>
        </div>                        
    </div>

    <div class="panel panel-default" id="panel-2">
        <div class="panel-heading" role="tab" id="heading-2">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">
                    Menu Item 2
                </a>
            </h4>
        </div>
        <div id="collapse-2" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                                    
                </div>
                <div class="radio text-left">
                    <label>
                        <input type="radio" name="agreements-2" id="agreements-2" />
                        I Agree
                    </label>
                </div>                                
            </div>
        </div>
    </div>

    <div class="panel panel-default" id="panel-3">
        <div class="panel-heading" role="tab" id="heading-3">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">
                    Menu Item 3
                </a>
            </h4>
        </div>
        <div id="collapse-3" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="radio text-left">
                    <label>
                        <input type="radio" name="agreements-3" id="agreements-3" />
                        I Agree
                    </label>
                </div>                                
            </div>
        </div>
    </div>

    <div class="panel panel-default" id="panel-4">
        <div class="panel-heading" role="tab" id="heading-4">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4">
                    Menu Item 4
                </a>
            </h4>
        </div>
        <div id="collapse-4" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="radio text-left">
                    <label>
                        <input type="radio" name="agreements-4" id="agreements-4" />
                        I Agree
                    </label>
                </div>                                
            </div>
        </div>
    </div>

    <div class="panel panel-default" id="panel-5">
        <div class="panel-heading" role="tab" id="heading-5">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5">
                    Menu Item 5
                </a>
            </h4>
        </div>
        <div id="collapse-5" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="radio text-left">
                    <label>
                        <input type="radio" name="agreements-5" id="agreements-5" />
                        I Agree
                    </label>
                </div>                                
            </div>
        </div>
    </div>

    <div class="panel panel-default" id="panel-6">
        <div class="panel-heading" role="tab" id="heading-6">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6">
                    Menu Item 6
                </a>
            </h4>
        </div>
        <div id="collapse-6" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="radio text-left">
                    <label>
                        <input type="radio" name="agreements-6" id="agreements-6" />
                        I Agree
                    </label>
                </div>                                
            </div>
        </div>
    </div>

</div>

user_17808730
Related