Щелкайте кнопкой Bootstrap, чтобы переключить развернуть/свернуть текстовую секцию над кнопкой

Недавно я пришел через бутстрап, и я работаю над расширением примера героя. Я хочу добавить на мою страницу следующее поведение:

Когда нажата кнопка (т.е. элемент с селектором ".row.btn" ), я хочу иметь возможность переключаться между расширением/свертыванием части текста над кнопкой.

Вот как выглядит 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>

Я могу взломать это с помощью jQuery, но, возможно, есть способ сделать это способом Bootstrap? - используя API Bootstrap?

Ответ 1

На основе документ

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

Рабочая демонстрация.

Ответ 2

Это можно сделать без использования дополнительного JS-кода, используя атрибуты Data-Collapse и Data-target по ссылке.

например.

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

Вот рабочий пример.

Ответ 3

Разрабатывая немного больше ответа Тейлора Готье (извините, у меня нет достаточной репутации, чтобы добавить комментарий), я бы ответил Дину Ричардсону, как делать то, что он хотел, без какого-либо дополнительного JS-кода. Чистый CSS.

Вы заменили бы его .btn на следующее:

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

И добавьте небольшой CSS для отображения содержимого:

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

Вот его измененный пример

Ответ 4

Мне нужен контейнер "expand/collapse" с кнопкой "плюс" и "минус", чтобы открыть и закрыть его. Это использует стандартное событие начальной загрузки и имеет анимацию. Это BS3.

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

Пример:

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

Ответ 5

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