Bei w3schools.com fand ich ein rein CSS-basiertes Accordion, bei dem sich jeder zuvor geöffnete Inhalt automatisch wieder schließt, sobald ein weiterer Inhaltsabschnitt geöffnet wird. So weit die Theorie.
Ich hab das Dingens in meine Experimentier-Website eingebaut und die einfache Collapse-Funktion geht auch auf Anhieb. Aber die mir wichtige vorbeschriebene Automatik des Schließen geht nicht. – Den Code habe ich zig mal auf Tippfehler sowohl CSS-seitig als auch HTML-seitig geprüft, auch auf evtl. Konflikte bei den Klassenbezeichnungen im vorhandenen Template: Alles OK.
Hier der Link zu meiner aktuellen Experimentier-Site, dort unter "Collapse" schauen:
Hier die von mir kommentierte Quelle bei w3schools.com
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse&stacked=v
Collapse
Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
In Joomla mit Protostar werden bereits als Standard folgende JS eingebunden:
/media/jui/js/jquery.min.js
/media/jui/js/bootstrap.min.js
Es fehlt also nur noch bootstrap.min.css
Um Konflikte zu vermeiden, hab ich die Klassen daraus nur so weit wie nötig in separater CSS-Datei eingebunden.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Collapse</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</body>
</html>
Alles anzeigen
Zuletzt hatte ich noch, so weit wie möglich, das Ganze mit dem Firefox-Inspektor geprüft, aber leider auch nix Auffälliges gefunden.
Wie krieg ich die "Schließen-Automatik" ans Laufen, bzw. finde den Fehler?