I have a bootstrap accordion. Now I want to enable a panel only on a certain scenario. When one of my panel is valid, only then the other panel should be collapsible

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group
                    Item #1 </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <form id="myform" action="" method="post"> //when this form is valid, then open the collapseTwo panel
            <div class="panel-body">
                <input type="text" id="txtName" name="txtName" />
                <br />
                <input type="text" id="txtCountry" name="txtCountry" />
                <br />
                <input id="btn" type="submit" name="submit" value="Submit" />
                <br />
            </div>
            </form>
        </div>
    </div>
    <div id="clickMe" class="panel panel-default"> // this will remain closed unless the above form is not valid
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group
                    Item #2 </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                //Some data
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#myform").validate({
            rules: {
                txtName: {
                    required: true
                },
                txtCountry: {
                    required: true
                }
            }
        });

        $("#myform").valid();

        $('#clickMe').on('shown.bs.collapse', function (e) {     //i click on the panel header

            if ($('#myform').valid()) {   //now if the first panel(which contains form) is valid
               $('#collapseTwo').collapse('show');    //then show the clicked panel
            }
            else {
                $('#collapseTwo').collapse('hide');  //else always keep it hidden/locked
                alert('form invalid');
            }
        })
    });
</script>

Fiddle

This is not behaving close to how it should actually function.

The collapseTwo panel should be locked and an alert message stating that the collapseOne panel is Invalid should be displayed. And if the form is valid then it should be the default behavior of collapsing.

I have a bootstrap accordion. Now I want to enable a panel only on a certain scenario. When one of my panel is valid, only then the other panel should be collapsible

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group
                    Item #1 </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <form id="myform" action="" method="post"> //when this form is valid, then open the collapseTwo panel
            <div class="panel-body">
                <input type="text" id="txtName" name="txtName" />
                <br />
                <input type="text" id="txtCountry" name="txtCountry" />
                <br />
                <input id="btn" type="submit" name="submit" value="Submit" />
                <br />
            </div>
            </form>
        </div>
    </div>
    <div id="clickMe" class="panel panel-default"> // this will remain closed unless the above form is not valid
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group
                    Item #2 </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                //Some data
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#myform").validate({
            rules: {
                txtName: {
                    required: true
                },
                txtCountry: {
                    required: true
                }
            }
        });

        $("#myform").valid();

        $('#clickMe').on('shown.bs.collapse', function (e) {     //i click on the panel header

            if ($('#myform').valid()) {   //now if the first panel(which contains form) is valid
               $('#collapseTwo').collapse('show');    //then show the clicked panel
            }
            else {
                $('#collapseTwo').collapse('hide');  //else always keep it hidden/locked
                alert('form invalid');
            }
        })
    });
</script>

Fiddle

This is not behaving close to how it should actually function.

The collapseTwo panel should be locked and an alert message stating that the collapseOne panel is Invalid should be displayed. And if the form is valid then it should be the default behavior of collapsing.

• javascript
• jquery
• twitter-bootstrap
• twitter-bootstrap-3
• jquery-validate

2 Answers 2

You're doing your check after the panel is shown:

$('#clickMe').on('shown.bs.collapse', function (e) {

Instead, use the show method:

$('#clickMe').on('show.bs.collapse', function (e) {

There's something else going on, too, but that's a start.

Update: Found the other issue... No need to force collapse behavior. Just prevent it when necessary.

if (!$('#myform').valid()) {
    return false;
}

Demo

Use default collapse method to show and hide

To show

$("#collapseOne").collapse('show');

To hide

$("#collapseOne").collapse('hide');