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