Bootstrap 4 collapse-accordion not working despite valid markup

问题

my accordion used to work with earlier versions of Bootstrap 4. Testing my site I observed that all my accordions are broken DESPITE a valid HTML markup. See it here : https://www.diabeclic.com/education/sexualite

I am desperate at this after 3 days of trying to bugfix, thanks a lot for your help.

Here is my accordion markup.

<div id="accordion-vueliste">
<!--accordion-->
<article class="card card-body py-1 mb-2">
    <h3 class="collapsed" data-toggle="collapse" data-target="#32" aria-expanded="false">1 - L’impuissance, c’est
        l’incapacité à maintenir une érection suffisante pour permettre une activité sexuelle satisfaisante ?</h3>
    <div id="32" class="collapse" data-parent="#accordion-vueliste">
        <p class="text-center lead font-weight-bold text-success ">Vrai <i class="fa fa-check fa-2x"></i></p>

        <p class="text-block">Le terme d’impuissance a été remplacé par celui de dysfonction érectile. Sa
            définition
            incomplète est dans l’intitulé de la question.<br>
            On la précise en ajoutant le caractère persistant des troubles : ils persistent depuis au moins 3 mois.<br>
            Des traitements efficaces peuvent être proposés dans le cadre d’un suivi avec votre médecin traitant.</p>
        <hr>
        <ul class="list-unstyled text-center liste-sources">
            <li class="text-sexualite">Dernière modification le 30/05/2016</li>
            <li><a href="http://www.aihus.fr/prod/data/aihus/vie/recommandationsauxmedecins2010.pdf" target="_blank"
                    rel="nofollow">Cuzin
                    B, Cour F, Bousquet P-J, Bondil P, Bonierbale M, Chevret-Measson M, et al. Recommandations aux
                    médecins
                    généralistes pour la prise en charge de première intention de la dysfonction érectile
                    (réactualisation 2010).
                    Sexologies. janv 2011;20(1):66-79.</a></li>
            <li><a href="http://www.ncbi.nlm.nih.gov/pubmed/?term=The+National+Institutes+of+Health+Consensus+Development+Conference+on+Impotence+was+convened+to+address"
                    target="_blank" rel="nofollow">NIH Consensus Conference. Impotence. NIH Consensus Development
                    Panel on
                    Impotence. JAMA. 7 juill 1993;270(1):83-90.</a></li>
        </ul>
    </div>
</article>

and the scripts I use :

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

回答1:

This is actually a good one and could be tricky sometimes to figure out! The reason why it's not working is because your integer IDs are not valid!

Starting From HTML 4:

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element's tree and must contain at least one character. The value must not contain any space characters (https://www.w3.org/TR/html5/dom.html#element-attrdef-global-id)

So the fix is to add characters to your collapsible container ID attributes!

...
<h3 class="collapsed" data-toggle="collapse" data-target="#test-32" aria-expanded="false">
    1 - L’impuissance, c’est l’incapacité à maintenir une érection suffisante
    pour permettre une activité sexuelle satisfaisante ?
</h3>
<div id="test-32" class="collapse show" data-parent="#accordion-vueliste">
...

demo: http://jsfiddle.net/davidliang2008/xgLv5csa/

来源：https://stackoverflow.com/questions/53047074/bootstrap-4-collapse-accordion-not-working-despite-valid-markup