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





2 Answers

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/

working popover width

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!




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>




Related