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>
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.
Vous devez vous connecter pour publier un commentaire.
Vous êtes en train de faire votre chèque après le panneau est affiché:
Au lieu de cela, utilisez la
show
méthode:Il y a autre chose, aussi, mais c'est un début.
Mise à jour: Trouve de l'autre problème... Pas besoin de la force de l'effondrement de comportement. Juste prévenir en cas de besoin.
Démo
Utiliser la valeur par défaut de l'effondrement de la méthode pour afficher et masquer les
Pour montrer
Pour masquer