Создание таблицы аккордеона с помощью Bootstrap

У меня есть таблица, которая заполняется из базы данных, в которой много столбцов (около 30). Решением, которое кто-то думал, было создание аккордеона из таблицы, где каждая строка является кликабельной и гармонизирует вниз, а остальные столбцы стоят информации. У меня возникли проблемы с загрузкой Bootstrap, чтобы сделать это правильно для меня.

<table class="table table-hover">
    <thead>
        <th></th><th></th><th></th>
    </thead>

    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <td>Some Stuff</td>
            <td>Some more stuff</td>
            <td>And some more</td>
        </tr>
        <tr>
            <td>
                <div id="accordion" class="collapse">Hidden by default</div>
            </td>
        </tr>
    </tbody>
</table>

Как вы можете видеть из jsfiddle, эта функция не работает. Я не совсем уверен, что не так, и документы Bootstrap не вдаются в подробности об обрушении.

Любая помощь будет принята с благодарностью, спасибо!

Ответ 1

Это, кажется, уже задано раньше:

Это может помочь:

Twitter Bootstrap Используйте collapse.js на ячейках таблицы [почти все]

UPDATE:

Ваша скрипка не загружала jQuery, поэтому все сработало.

<table class="table table-hover">
<thead>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</thead>

<tbody>
    <tr data-toggle="collapse" data-target="#accordion" class="clickable">
        <td>Some Stuff</td>
        <td>Some more stuff</td>
        <td>And some more</td>
    </tr>
    <tr>
        <td colspan="3">
            <div id="accordion" class="collapse">Hidden by default</div>
        </td>
    </tr>
</tbody>
</table>

Попробуйте следующее: http://jsfiddle.net/Nb7wy/2/

Я также добавил colspan = '2' в строку сведений. Но это по сути ваша скрипка с загруженным jQuery (в рамках в левом столбце)

Ответ 2

Для тех, кто пришел сюда, чтобы узнать, как получить истинный эффект аккордеона и разрешить только одну строку, вы можете добавить обработчик событий для show.bs.collapse следующим образом:

$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});

Я изменил этот пример, чтобы сделать это здесь: http://jsfiddle.net/QLfMU/116/

Ответ 3

Я использую таблицу в соответствии, но мне было интересно, может ли кто-нибудь сказать мне, как удалить прописку/пробел между свернутой строкой, когда она рушится.

Здесь изображение

И вот код для этого:

<div class="panel">
<table class="table table-hover">
    <thead>
        <th><img src="/img/gb.svg" height="12" align="top">&nbsp;Engleski jezik </th><th>&nbsp;<i class="fa fa-spinner" aria-hidden="true"></i>&nbsp;&nbsp;Sati</th><th><i class="fa fa-hourglass-start" aria-hidden="true"></i>&nbsp;60 min.</th><th>&nbsp;<i class="fa fa-credit-card" aria-hidden="true"></i>&nbsp;Jednokratno</th>
    </thead>
    
    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <td>Engleski jezik A1 (početni)</td>
            <td>30</td>
            <td>60 min.</td>
<td>2200 KN</td>

        </tr>
        <tr>
            <td colspan="4">
                <div id="accordion" class="collapse"><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;<b>Trajanje:</b> 30 sati<br><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;<b>Trajanje sata:</b> 60 minuta<br><i class="fa fa-calendar-check-o" aria-hidden="true"></i>&nbsp;<b>Termini: </b>Po dogovoru<br><i class="fa fa-credit-card" aria-hidden="true"></i>&nbsp;<b>Cijena sata: </b>80 KN<br><i class="fa fa-book" aria-hidden="true"></i>&nbsp;<b>Osnovna literatura: </b>English File: Elementary: Student Book<br><br>

Ответ 4

В принятом ответе вы получаете раздражающее расстояние между видимыми строками, когда расширяемая строка скрыта. Вы можете избавиться от этого, добавив это в css:

.collapse-row.collapsed + tr {
     display: none;
}

'+' смежный селектор селектора, поэтому, если вы хотите, чтобы ваша расширяемая строка была следующей строкой, это выбирает следующий tr следующий tr named collapse-row.

Здесь обновляется скрипка: http://jsfiddle.net/Nb7wy/2372/