Accordéon Bootstrap, en garder toujours un d'ouvert
Bonjour à tous,
J'utilise l'accordéon de type bootstrap, voici un bout de mon code :
<div id="competence" class="row OnePart">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 onePartRepere">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">
<a class="buttonPanelTitle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Technologie d'intégration</a>
</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in body_compet">
<div id="collapseIntegration" class="panel-body body_compet_re">
<div class="row row_panel">...
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">
<a class="buttonPanelTitle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Technologie développement côté client</a>
</h3>
</div>
<div id="collapseTwo" class="panel-collapse collapse body_compet">
<div id="collapseDevClient" class="panel-body body_compet_re">
<div class="row row_panel">...
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">
<a class="buttonPanelTitle" data-toggle="collapse" data-parent="#accordion" href="#collapseTree">Technologie développement côté serveur</a>
</h3>
</div>
<div id="collapseTree" class="panel-collapse collapse body_compet">
<div id="collapseDevServeur" class="panel-body body_compet_re">
<div class="row row_panel">....
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">
<a class="buttonPanelTitle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Frameworks et CMS</a>
</h3>
</div>
<div id="collapseFour" class="panel-collapse collapse body_compet">
<div id="collapseFramework" class="panel-body body_compet_re">
<div class="row_panel">....
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">
<a class="buttonPanelTitle" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">Logiciels & Interface</a>
</h3>
</div>
<div id="collapseFive" class="panel-collapse collapse body_compet">
<div class="panel-body body_compet_re">
<div class="row_panel">....
</div>
</div>
</div>
</div>
</div>
</div>
</div>Tout marche bien, lors de l'arrivée sur la page, le 1er accordéon est ouvert par défaut grâce à la "class in", mon problème c'est que j'aimerais que quand on clique sur le seul qui est ouvert, je voudrais que l'accordéon en cours ne puisse se fermé, en avoir toujours un d'ouvert en fait.
Ecrire ce message ma donné une idée, et même cette idée, ne fonctionne pas, la voici :
$('.in').parent('.panel-default').children('.panel-heading').children('.panel-title').children('a').click(function(e){
alert('hé ho, hé ho, on rentres du boulot');
e.preventDefault();
});L'alerte se déclenche uniquement et toujours sur le premier accordéon, que je le ferme ou l'ouvres, mais l'action que je ne désire pas continu.
Si quelqu'un peut m'aider avec un truc qui fonctionne, ce serait super merci
13 réponses
Ok, j'ai repris la version du site bootstrap pour être sûr qu'on ait la même version
J'utilise un flag qui indique si l'onglet sur lequel on clique est ouvert ou non
j'interdis la fermeture uniquement si l'onglet est déjà ouvert (on veut le fermer)
<script>
flagExpanded = true;
$(document).ready(
function() {
$('#accordion').on ('hide.bs.collapse', function() {
var nb_expanded = 0;
$('.panel-collapse.in').each(function(){
nb_expanded++;
});
if (nb_expanded == 1 && flagExpanded) {
return false;
}
flagExpanded = true;
});
$('#accordion').on ('show.bs.collapse', function() {
flagExpanded = false;
});
}
)
</script>Merci, çà marche, c'est super !
Dis-moi, tu as trouvé une doc ? Si oui, puis je avoir le lien ?
J'ai eu beau chercher, j'ai jamsi trouvé, et j'aimerais bien comprendre et ne pas reposer sur toi en cas de galère, mais bon, merci beaucoup, j'ai ce problème depuis un mois, et plein d'autres soucis que j'essai de résoudre moi-même avant de demander un coup de main .
;-)
Exemple bootstrap sur :
http://getbootstrap.com/javascript/#collapse-example-accordion
La doc parle d'Event qu'on doit pouvoir intercepter juste avant l'action
Si on doit fermer un classeur, vérifier qu'il y en a d'autres ouverts
(pas encore testé)
j'ai testé avec l'évènement 'hide.bs.collapse'
je compte le nombre de dossiers 'expanded' en me basant sur l'attribut 'aria-expanded' qui doit être à true
je bloque la fermeture si le nombre est égal à 1
<script>
$(document).ready(
function() {
$('#accordion').on ('hide.bs.collapse', function() {
var nb_expanded = 0;
$('.panel-collapse[aria-expanded="true"]').each(function(index, value){
nb_expanded++;
});
if (nb_expanded == 1) {
return false;
}
});
}
)
</script>l'id #accordion c'est ma div qui englobe tout
en mettant l'event dessus, ça marche pour tous les onglets qui se trouvent à l'intérieur.
J'ai pris que cette partie là :
$('#accordion').on ('hide.bs.collapse', function() {
var nb_expanded = 0;
$('.panel-collapse[aria-expanded="true"]').each(function(index, value){
nb_expanded++;
});
if (nb_expanded == 1) {
return false;
}
});çà marche presque, yen a tout le temps un d'ouvert, le problème c'est que ten a deux d'ouvert en même temps, le 1 er se ferme que quand quand tu cliques sur un troisième à ouvrir, c'est presque çà je pense, le raissonnement est bon
Pourtant je te jure qu'avec mon code, çà me fait çà avec ton bout de code que j'ai rajouté !
Une petite vidéo tout spécialement pour toi pour t'illustrer mon problème :
http://youtu.be/uIKBAxha8mo
et encore une autres qui concerne directement mon projet, pour te prouver qu'il y a bel et bien un souci, j'invente rien :
En tout cas, merci quand même, il y a du mieux, mais deux d'ouverts en même temps, c'est trop !
Merci, çà marche, c'est super !
Dis-moi, tu as trouvé une doc ? Si oui, puis je avoir le lien ?
Non il n'y a pas de doc à part celle de Bootstrap
après c'est du jquery et de la manipulation de class