web-dev-qa-db-fra.com

Cacher div par défaut et l'afficher au clic avec bootstrap

Je souhaite afficher et masquer une div, mais je souhaite qu’elle soit masquée par défaut et puisse être affichée et masquée lors d’un clic. Voici le code que j'ai créé:

<a class="button" onclick="$('#target').toggle();">
 <i class="fa fa-level-down"></i>
</a>

<div id="target"> 
 Hello world... 
</div>
javascriptjqueryhtmlcsstwitter-bootstrap
59
Ouda

Il suffit d'ajouter de l'eau style="display:none"; au <div>

Les violons je dis: http://jsfiddle.net/krY56/13/

jQuery:

function toggler(divId) {
    $("#" + divId).toggle();
}

Préférable d'avoir une classe CSS .hidden

.hidden {
     display:none;
}
21
Ali Gajani

Ici, je propose un moyen de le faire exclusivement en utilisant la fonctionnalité intégrée du cadre Bootstrap.

  1. Vous devez vous assurer que la cible div a un ID.
  2. Bootstrap a un class "collapse", cela cachera votre bloc par défaut. Si vous voulez que votre div soit pliable ET soit affichée par défaut, vous devez ajouter la classe "in" à la réduction. Sinon, le comportement de la bascule ne fonctionnera pas correctement.
  3. Ensuite, sur votre lien hypertexte (fonctionne également pour les boutons), ajoutez un attribut href qui pointe vers votre div cible.
  4. Enfin, ajoutez l’attribut data-toggle="collapse" pour indiquer à Bootstrap d’ajouter un script de basculement approprié à cette balise.

Voici un exemple de code pouvant être copié-collé directement sur une page qui inclut déjà le framework Bootstrap:

<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
    This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
    This div (Bar) is shown by default and can toggle
</div>
249
CowWarrior

Essaye celui-là:

<button class="button" onclick="$('#target').toggle();">
    Show/Hide
</button>
<div id="target" style="display: none">
    Hide show.....
</div>
14
Anil Bhattarai100

Je me rends compte que cette question est un peu dépassée et, comme elle apparaît dans la recherche Google pour un problème similaire, je pensais approfondir un peu plus la réponse de @ CowWarrior. Je cherchais une solution quelque peu similaire et, après avoir parcouru d'innombrables SO questions/réponses et Bootstrap documentations, la solution était assez simple. Encore une fois, cela utiliserait la classe Bootstrapincorporée _ collapse pour afficher/masquer les divs et "l'événement Réduire" de Bootstrap.

Ce que j’ai compris, c’est qu’il est facile de le faire avec un accordéon Bootstrap _, mais la plupart du temps, même si la fonctionnalité requise est "un peu" similaire à un accordéon, elle est différente de celle que l’on voudrait afficher masquer <div> basé sur, disons, les boutons de menu sur un navbar. Vous trouverez ci-dessous une solution simple à cela. Les balises d'ancrage (<a>) pourraient être des éléments de la barre de navigation et, en fonction d'un événement de réduction, la division correspondante remplacera la division existante. Il semble un peu bâclé dans CodeSnippet, mais il est assez proche de la réalisation de la fonctionnalité-

Tout ce que le JavaScript fait, c’est que tous les autres <div> sont masqués par

$(".main-container.collapse").not($(this)).collapse('hide');

lorsque le <div> chargé est affiché en vérifiant l'événement Collapse shown.bs.collapse. Voici la Bootstrap documentation relative à l'événement Collapse.

Remarque: main-container n'est qu'une classe personnalisée.

Ici ça va-

$(".main-container.collapse").on('shown.bs.collapse', function () {    
//when a collapsed div is shown hide all other collapsible divs that are visible
       $(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<a href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</a>

<div id="Bar" class="main-container collapse in">
    This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
    This div (#Foo) is hidden by default
</div>
5
Annjawn