afficher/masquer le bootstrap panneau accordéon avec jQuery

J'ai un bootstrap de l'accordéon. Maintenant, je veux permettre à un panel uniquement sur un certain scénario. Quand un de mes panneau est valide, alors seulement l'autre panneau 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>

Violon

Ce n'est pas de se comporter à la façon dont il devrait en fait fonction.

La collapseTwo panneau doit être verrouillé et un message d'alerte indiquant que le collapseOne panneau n'est pas Valide doit être affiché. Et si le formulaire est valide, alors il devrait être le comportement par défaut de s'effondrer.

InformationsquelleAutor user2281858 | 2014-09-24