web-dev-qa-db-fra.com

Twitter Bootstrap _ cliquez pour modifier / réduire la section de texte au-dessus du bouton

Je suis récemment passé à travers bootstrap et je travaille à étendre l'exemple du héros. Je veux ajouter le comportement suivant à ma page:

Lorsque vous cliquez sur un bouton (c'est-à-dire un élément avec le sélecteur '.row .btn'), je souhaite pouvoir basculer entre le développement et la réduction de la portion de texte située au-dessus du bouton.

Voici à quoi ressemble le code HTML:

<html>
  <head>
      <title>Test Page</title>
    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
    </div>

    <div class="container">
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>Blah, blah.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>

      <!-- Example row of columns -->
      <div class="row">
        <div class="span4">
          <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
      </div>
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>

Je peux pirater cela en utilisant jQuery, mais peut-être y a-t-il un moyen de le faire de la même manière que le Bootstrap? - c’est-à-dire utiliser l’API Bootstrap?

javascriptjquerycsstwitter-bootstrap
66
Homunculus Reticulli

Basé sur la doc

<div class="row">
    <div class="span4 collapse-group">
        <h2>Heading</h2>
        <p class="collapse">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

$('.row .btn').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $collapse = $this.closest('.collapse-group').find('.collapse');
    $collapse.collapse('toggle');
});

Démo de travail .

70
Sherbrow

Il est possible de le faire sans utiliser de code JS supplémentaire en utilisant les attributs data-collapse et data-target sur le lien a.

par exemple.

<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details &raquo;</a>

Voici un exemple de travail .

152
Taylor Gautier

Expliquant un peu plus la réponse de Taylor Gautier (désolé, je n’ai pas assez de réputation pour ajouter un commentaire), je répondrais à Dean Richardson sur la façon de faire ce qu’il voulait, sans code JS supplémentaire. CSS pur.

Vous voudriez remplacer son .btn par ce qui suit:

<a class="btn showdetails" data-toggle="collapse" data-target="#viewdetails"></a>

Et ajoutez un petit CSS pour quand le contenu est affiché:

.in.collapse+a.btn.showdetails:before { 
    content:'Hide details «';
}
.collapse+a.btn.showdetails:before { 
    content:'Show details »'; 
}

Voici son exemple modifié

29
Giovanni Silveira

Je voulais un conteneur "expand/collapse" avec un bouton plus et moins pour l'ouvrir et le fermer. Ceci utilise l'événement standard bootstrap et possède une animation. Ceci est BS3.

enter image description here

HTML:

<button id="button" type="button" class="btn btn-primary" 
  data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Show
</button>

<div id="demo" class="collapse">
  <ol class="list-group">
      <li class="list-group-item">Warrior</li>
      <li class="list-group-item">Adventurer</li>
      <li class="list-group-item">Mage</li>
  </ol>
</div>

JS:

$(function(){
  $('#demo').on('hide.bs.collapse', function () {
    $('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show');
  })
  $('#demo').on('show.bs.collapse', function () {
    $('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide');
  })
})

Exemple:

http://plnkr.co/edit/aG5BtH?p=preview

11
Jess

html:

<h4 data-toggle-selector="#me">toggle</h4>
<div id="me">content here</div>

js:

$(function () {
    $('[data-toggle-selector]').on('click',function () {
        $($(this).data('toggle-selector')).toggle(300);
    })
})
1
CMS