Bootstrap 4 Onglet de l'Accordéon. Comment?

J'ai googlé et trouvé comment faire Bootstrap 3 onglet de l'accordéon en responsive ici Bootstrap 3 onglet de l'accordéon, mais je suis en utilisant Bootstrap 4 et je ne sais pas comment faire pour le convertir à l'Amorçage 4 onglet de l'accordéon. S'il vous plaît aider moi.

Merci!

mettre le code - votre lien est bloqué par de la.

OriginalL'auteur Duc Manh Nguyen | 2017-12-15

  1. 2

    Actuel Bootstrap 4 versions, suggère la data-parent devrait être mis sur l'effondrement des conteneurs.

    Pour ajouter de l'accordéon comme le groupe de gestion d'une zone réductible, ajouter l'attribut data de données-parent="#sélecteur".

    <div class="container">
    <ul id="tabs" class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
        </li>
        <li class="nav-item">
            <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
        </li>
        <li class="nav-item">
            <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
        </li>
    </ul>

    <div id="content" class="tab-content" role="tablist">
        <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
        <div class="card-header" role="tab" id="heading-A">
            <h5 class="mb-0"><a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">Collapsible Group Item A</a></h5>
        </div>
        <div id="collapse-A" class="collapse show" role="tabpanel" data-parent="#content" aria-labelledby="heading-A">
           <div class="card-body">[Tab content A]</div>
        </div>
    </div>

    <div id="pane-B" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-B">
        <div class="card-header" role="tab" id="heading-B">
            <h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">Collapsible Group Item B</a></h5>
        </div>
        <div id="collapse-B" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-B">
            <div class="card-body">[Tab content B]</div>
        </div>
    </div>

    <div id="pane-C" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-C">
        <div class="card-header" role="tab" id="heading-C">
            <h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C">           Collapsible Group Item C</a></h5>
        </div>
        <div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
            <div class="card-body">[Tab content C]</div>
        </div>
    </div>
</div>

    https://getbootstrap.com/docs/4.0/components/collapse/#via-data-attributes

    DÉMO

    merci beaucoup Tim! C'était un non trivial à résoudre merci! J'ai essayé de suivre votre commentaire initial, mais ne pouvait pas obtenir de droit
    FYI _ Tim, un grand travail, mais avec 2 légers bugs 1) si vous choisissez l'onglet C ([contenu de l'Onglet C]) ou l'Onglet B ([contenu de l'Onglet B]) dans les grandes redimensionner puis vers le bas de l'Accordéon Titre (et ou le Titre C) disparaît, aussi lorsque vous sélectionnez un onglet" ou "accordéon" soit dans la mode, le contenu sélectionné n'est pas conservé dans l'affiche de l'accordéon/onglet redimensionnée mode
    Je vous remercie pour cette. Je vais comparer avec mon dernier intégration de demain. Devrait être possible de régler cette question avec les attributs data-seulement.
    Ou aujourd'hui ^^ Question liée à la CSS. Veuillez noter le changement de sélecteur de .tab-content .tab-pane.
    vous avez sauvé mon bacon!!!

    OriginalL'auteur Tim Vermaelen

  2. 1

    J'ai fait cette amorce 4 onglet de l'accordéon à l'aide de jquery..... J'espère que ça fonctionne 🙂

    function tabToAccordion(){
    var navTab = $(".nav-tabs"),
        tabContent = $(".tab-content");
        //hiding the navtabs
    navTab.hide();
    //appending each link to respective tab-pane
        navTab.find("li").each(function(){
            var destination = $($(this).find(".nav-link").attr("href"));
            var anchor = $(this).find(".nav-link");
            //removing unused attributes and adding tabContent-toggler class
            anchor.removeAttr("data-toggle role aria-controls aria-selected").addClass("tabContent-toggler").insertBefore(destination);
        });
    var tabToggler = $('.tabContent-toggler'),
    tabPane = tabContent.find(".tab-pane"),
    //get all classes in tab pane for further usage and replace tab-pane with empty data
    nonActiveTabPane = tabContent.find(".tab-pane:not(.active)").attr("class");
    tabPaneClass = tabPane.attr('class');
    tabPaneClass = tabPaneClass.replace(nonActiveTabPane,"");
    tabToggler.click(function(e){
        //get the destination of clicked element
        var destination = $($(this).attr("href"));
        //if not this element then remove active class
        $(this).parent().find(tabToggler).not($(this)).removeClass("active");
        //if not clicked destination then remove all other class except tab-pane
        $(this).parent().find('.tab-pane').removeClass(tabPaneClass);
        //now toggle active class
        $(this).toggleClass("active");
        //also toggle all other class in tab-pane
        destination.toggleClass(tabPaneClass);
        //if this element dont have active class then remove all other class from tab-pane
        if(!$(this).hasClass("active")){
            destination.removeClass(tabPaneClass);
        }
        //first element of nested tab-pane should be active
        if(destination.has(tabToggler)){
            var tabTogglerFirstChild = destination.find(".tabContent-toggler:first-child"),
            tabTogglerFirstDestination = $(tabTogglerFirstChild.attr("href"));
            tabTogglerFirstChild.addClass("active");
            tabTogglerFirstDestination.addClass(tabPaneClass);
        }
        //preventing default behaviour of element
        e.preventDefault();
    });
}
//check if device is mobile and if so only run the function
if(/Mobi/.test(navigator.userAgent)){
    tabToAccordion();
}

    OriginalL'auteur designerdarpan