Botón Bootstrap de Twitter haga clic para alternar expandir / contraer el botón de la sección de texto anterior

Question

Botón Bootstrap de Twitter haga clic para alternar expandir / contraer el botón de la sección de texto anterior

Recientemente he llegado a través de bootstrap y estoy trabajando en extender el ejemplo de hero. Quiero añadir el siguiente comportamiento a mi página:

Cuando un botón (es decir, un elemento con selector '.fila .btn') se hace clic en, quiero ser capaz de alternar entre expandir/contraer la porción de texto sobre el botón.

Así es como se ve el 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>

Puedo hackear esto usando jQuery, pero tal vez hay una manera de hacerlo de la manera Bootstrap? - es decir, utilizando el ¿API de Bootstrap?

65

css javascript jquery twitter-bootstrap

Author: Homunculus Reticulli, 2012-08-15

Source

5 answers

Es posible hacer esto sin usar código JS adicional utilizando los atributos data-collapse y data-target en el enlace a.

Por ejemplo

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

Aquí hay un ejemplo de trabajo.

151

Author: Taylor Gautier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-06 19:29:03

Elaborando un poco más sobre la respuesta de Taylor Gautier (lo siento, no tengo suficiente reputación para agregar un comentario), respondería a Dean Richardson sobre cómo hacer lo que quería, sin ningún código JS adicional. CSS puro.

Usted reemplazaría su .btn con lo siguiente:

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

Y añade un pequeño CSS para cuando se muestre el contenido:

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

Aquí está su ejemplo modificado

29

Author: Giovanni Silveira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-04 20:35:09

Quería un contenedor "expand/collapse" con un botón más y menos para abrirlo y cerrarlo. Esto utiliza el evento bootstrap estándar y tiene animación. Esto es BS3.

introduzca la descripción de la imagen aquí

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');
  })
})

Ejemplo:

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

10

Author: Jess,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-28 12:39:03

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

Author: CMS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-28 04:34:03

score 70 · Accepted Answer

Basado en el 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');
});

Demo de trabajo .