Dokumentationen du länkade till föreslår att börja så här:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Första raden hittar alla .collapse-element och gör en array av det.
Sen gör man en ny array utifrån elementen. Den nya arrayen innehåller bootstrap.Collapse-instanser – en för varje element. På en sådan instans kan man till exempel göra .hide() för att stänga.
Så jag lade in det i din kod. Dock blev collapseElementList en tom array, för den koden körs före alla elementen nedanför hunnit skapats. Så jag flyttade hela script-taggen till slutet istället.
Då återstår bara att uppdatera din collapse-funktion.
För att stänga allihop:
collapseList.forEach(function (collapse) {
collapse.hide()
})
Och sen för att öppna den man tryckte på:
collapseList[n - 1].show()
Det blir n minus ett för att arrays börjar på 0, inte 1.
Allt på en gång:
<html><head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr..." rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstra..."></script>
</head>
<body>
<h1 onclick="collapse(1);">Rubrik 1</h1><br>
<div class="collapse">
Undertext till rubrik ett
</div>
<br><br>
<h1 onclick="collapse(2);">Rubrik 2</h1><br>
<div class="collapse">
Undertext till rubrik två
</div>
<br><br>
<h1 onclick="collapse(3);">Rubrik 3</h1><br>
<div class="collapse">
Undertext till rubrik tre
</div>
<script>
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl, { toggle: false })
})
function collapse(n) {
collapseList.forEach(function (collapse) {
collapse.hide()
})
collapseList[n - 1].show()
}
</script>
</body>
</html>
Inte den finaste kod jag skrivit, men nåt i den stilen borde hjälpa.
