CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Almog
Almog

Reputation: 2837

Bootstrap 3 collapse accordion stop / disable opening spefifc panel

I have a bootstrap 3 accordion I would like to stop X panel from opening if my form is not validated. I have the following code so far but still can't get it to stop opening 

// Accordion 
    $('#accordion').on('shown.bs.collapse', function (e) {
        var id = $(e.target).prev().find("[id]")[0].id;
        var poNumber = s.splice(id, 0, 2);
        if (false === $('#bioForm').parsley().validate('PO' + poNumber-1)) {
           e.stopPropagation(); 
        } else {
            $('body').animate({
                scrollTop: $("#" + id).offset().top
            }, 1000);
        }

    });

Here is the HTML (just the first panel its the same for the rest)

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<!-- PO 1 -->
<div class="panel-heading" role="tab" id="heading1">
<a data-toggle="collapse" id="po1" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
<h4 class="panel-title"> PO #1
</h4>
</a>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<div class="form-group">
</div>
</div>
 </div>
</div>
 <!-- PO 1 END -->

Upvotes: 0

Views: 2649

Answers (2)

Dustin Butler
Dustin Butler

Reputation: 897

Add a click event to the toggle href. We have to assume this fires before the collapse events so the propagation can be stopped. See http://jsfiddle.net/xwhes56a/1

var valid = false;

$(function() {
  $('a[data-toggle]').on('click', function(e) {
    // Panel that is currently open
    var panel = $('div.in');
    if (! valid) {
      alert('Sorry panel ' + panel[0].id + ' not validated');
      e.stopPropagation();
    }
  });
});

Upvotes: 2

KJ Price
KJ Price

Reputation: 5964

How about this:

if (false === $('#bioForm').parsley().validate('PO' + poNumber-1)) {
   $(this).collapse();
}

Per the "Via Javascript" Section of the Bootstrap documentation

Upvotes: -1

Related Questions