javascript tooltip - Création d'une table d'accordéon avec bootstrap





not working (5)


Dans la réponse acceptée, vous obtenez un espacement gênant entre les lignes visibles lorsque la ligne extensible est masquée. Vous pouvez vous en débarrasser en ajoutant ceci à css:

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

'+' est un sélecteur frère adjacent , donc si vous voulez que votre ligne extensible soit la ligne suivante, cela sélectionne la ligne suivante qui se réduit à l'effondrement.

Voici le violon mis à jour: http://jsfiddle.net/Nb7wy/2372/

J'ai une table qui est remplie à partir d'une base de données qui a beaucoup de colonnes (environ 30). Une solution envisagée consistait à créer un accordéon sur la table, où chaque ligne est cliquable et s'accorderait vers le bas avec le reste des colonnes d'informations. J'ai du mal à faire en sorte que Bootstrap le fasse correctement.

<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>

Comme vous pouvez le voir sur le jsfiddle , cette fonctionnalité ne fonctionne pas. Je ne suis pas vraiment sûr de ce qui ne va pas, et les documents de Bootstrap ne donnent pas beaucoup de détails sur la réduction.

Toute aide serait grandement appréciée, merci!




Pour quiconque est venu ici pour savoir comment obtenir l'effet accordéon réel et permettre à une seule ligne d'être développée à la fois, vous pouvez ajouter un gestionnaire d'événement pour show.bs.collapse comme ceci:

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

J'ai modifié this exemple pour le faire ici: http://jsfiddle.net/QLfMU/116/




Cela semble être déjà demandé avant:

Cela pourrait aider:

Twitter Bootstrap Utiliser collapse.js sur les cellules de la table [presque terminé]

METTRE À JOUR:

Votre violon ne chargeait pas jQuery, donc tout a fonctionné.

<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>

Essayez celui-ci: http://jsfiddle.net/Nb7wy/2/

J'ai également ajouté colspan = '2' à la ligne des détails. Mais c'est essentiellement votre violon avec jQuery chargé (dans les frameworks dans la colonne de gauche)




J'utilise la table en fonction, mais je me demandais si quelqu'un pourrait me dire comment supprimer le remplissage / espace entre la ligne réduite quand il est réduit.

Voici l'image

Et voici le code pour cela:

<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's Book<br><br>




Encore mieux avec jQuery:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});






javascript html css twitter-bootstrap twitter-bootstrap-3