[Accordéons Bootstrap] Un accordéons avec un accordéons imbriqué ?

Bonjour,

Je suis débutante et ma question est peut-être bête car illogique et impossible.
J'ai actuellement un accordéon Bootstrap (code à la fin du message) et j'aimerais que les 2 premières sections contiennent également un accordéon. En gros, j'essaye de bricoler une espace de menu oui... Je ne sais pas si c'est possible ou pas.
Actuellement, en copiant le code du premier accordéon dans une des section de celui-ci, évidemment, ça ne marche pas (logique) et en plus, si on ouvre la section 3 du premier accordéon, ça ouvre aussi la section 3 de l'accordéon imbriqué dans la section du premier.
Auriez-vous une solution à me proposer (même si ce n'est pas l'accordéon imbriqué dans un accordéon, tant que quand j'ouvre une section de l'accordéon et que je peux avoir de nouveau des "zones" cliquables, peut-être en décallé).

Merci par avance pour votre aide,
Belle journée !

----- extrait du code :
<div class="container mt-3">
<h4 class="mb-1">Accordion Example</h4>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Javascript
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample" style="">
<div class="card-body">
JavaScript is a scripting or programming language that allows you to implement complex things on web pages ..
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Css
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample" style="">
<div class="card-body">
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media ..
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Bootstrap
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample" style="">
<div class="card-body">
Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography ...
</div>
</div>
</div>
</div>
</div>

Bonjour et bienvenue,

oui c'est possible, exemple avec Bootstrap 3.x sur mobile https://www.vigicrues.gouv.fr/faq.php (c'est plus qu'un accordéon imbriqué parce que sur desktop ça devient visuellement 1 accordéon par onglet)

La difficulté est qu'il faut intégralement dissocier les id="valeur", aria-truc="valeur" ou data-target="valeur" sans aucun oubli.
Il faut y aller pas à pas. Avoir par exemple comme convention de nommage le préfixe "intUn" pour le 1er accordéon imbriqué et "intDeux" pour le 2e ("int" pour interne).
S'assurer qu'ils fonctionnent séparément et côte-à-côte.
Construire dans une nouvelle page l'accordéon qui les imbriquera avec par exemple le préfixe "ext". S'assurer qu'il fonctionne seul.
Copier-coller les 2 accordéons "int" comme "panneaux" (contenu) de l'accordéon "ext".

Perso j'ai un programme de Presse-papier multiple https://bluemars.org/clipx/ qui me permet de pas devenir chèvre quand je c/c des trucs pareils dans tous les sens (il retient les 25 derniers trucs copiés, que l'on peut rappeler avec un raccourci-clavier et je l'ai passé à 250 parce que pourquoi pas )