Bootstrap: Réduire d’autres sections lorsqu’une est développée

Je fais une application Rails, et j’essaie d’obtenir une fonctionnalité particulière liée à l’ effondrement de Bootstrap sur Twitter. Gardez avec moi comme je l’explique.

J’ai actuellement la vue suivante:

entrer la description de l'image ici

Lorsque chacun de ces boutons est cliqué, leur div à bascule de données est développé. La vue est configurée comme suit:

   

Je les ai mis en place comme ça, parce que je veux que les boutons soient côte à côte, en rang. Si je déplace les boutons juste au-dessus de la vue, ils se développent / se réduisent, puis les boutons s’emstacknt les uns sur les autres.

Mon objective final est donc d’avoir les trois boutons côte à côte et de les réduire et d’élargir leurs sections respectives. La configuration actuelle fonctionne, cependant, est un peu délicate. Par exemple, si quelqu’un développe la section des clés puis développe la section des atsortingbuts, il doit défiler sous la section des clés.

Il existe deux solutions possibles à ce problème. Premièrement, si vous appuyez sur un bouton, les deux autres s’effondrent. Cela voudrait dire qu’à un moment donné, une seule de ces sections est étendue.

Je pense que la meilleure solution serait de l’avoir de telle sorte que lorsque les touches sont développées, les boutons à droite descendent au bas de la div des touches et lorsque les atsortingbuts sont développés, le bouton modifier les détails se déplace vers le bas de cette div . Est-ce possible? J’ai déjà essayé de le faire en laissant les boutons s’emstackr les uns sur les autres et en changeant leur emplacement relatif par le biais de css, mais cela ne fonctionnait pas car lorsque l’une des sections était développée, les autres boutons se retrouvaient dans des endroits difficiles. milieu de la section élargie.

Enfin, je voudrais essayer de le faire sans le comportement de style accordéon mentionné sur la page de démarrage de twitter, mais si quelqu’un peut me convaincre du sharepoint vue de la conception que cela est préférable, je reconsidérerais certainement.

Utiliser data-parent , la première solution consiste à s’en tenir à l’architecture de sélecteur d’exemple

 
keys
attrs
edit

Démo (jsfiddle)

La deuxième solution consiste à lier les événements et à cacher les autres éléments pliables.

 var $myGroup = $('#myGroup'); $myGroup.on('show.bs.collapse','.collapse', function() { $myGroup.find('.collapse.in').collapse('hide'); }); 

Démo (jsfiddle)

PS: l’effet étrange dans les démos est causé par le min-height défini pour l’exemple, ignorez simplement cela.


Edit: modifie l’événement JS de show à show.bs.collapse comme spécifié dans la documentation Bootstrap .

Si vous ne voulez pas changer votre balisage, cette fonction fait l’affaire:

 jQuery('button').click( function(e) { jQuery('.collapse').collapse('hide'); }); 

Chaque fois qu’un bouton est cliqué, toutes les sections sont réduites. Ensuite, bootstrap ouvre celui que vous avez sélectionné.

Si vous utilisez Bootstrap 4 et que vous ne souhaitez pas modifier votre balisage:

 var $myGroup = $('#myGroup'); $myGroup.on('show.bs.collapse','.collapse', function() { $myGroup.find('.collapse.show').collapse('hide'); }); 

Si vous vous en tenez à la structure HTML et aux sélecteurs appropriés conformément à la convention Bootstrap, vous devriez vous en sortir.

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

DEMO

Bootstrap 3 exemple avec des boutons côte à côte sous le contenu

 .panel-heading { display: inline-block; } .panel-group .panel+.panel { margin: 0; border: 0; } .panel { border: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; background-color: transparent !important; } 
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Utilisez ceci:

 $('.panel-defaul.ph').on('show.bs.collapse', function () { $(this).children('.panel-heading').addClass('panel-heading-collapsed'); $('.panel-defaul.ph').not(this).children('.panel-collapse').removeClass('in'); }); 

Dans bootstrap 4 pour fermer tous les effondrés fonctionne comme ceci:

ACTION:

  

JQUERY:

 $(document).ready(function() { $("#CloseAll").on('click', function() { $(".collapse").removeClass("show"); }); }); 

La méthode fonctionne correctement pour moi:

 var lanopt = $(".language-option"); lanopt.on("show.bs.collapse",".collapse", function(){ lanopt.find(".collapse.in").collapse("hide"); }); 

travailler comme un charme ici pour bootstrap 4> 4.1.1

 var myGroup = $('your-list'); myGroup.on('show.bs.collapse','.collapse', function() { myGroup.find('.collapse.show').collapse('hide'); });