Accordion scripte lädt Seite neu

[bzwerg]

Hallo zusammen,

ich würde gern ein Accordion auf meiner Sharepointseite einfügen. Funktioniert auch super, leider lädt die Seite beim ausklappen neu, so dass dann das Element wieder eingeklappt ist. Hier der Code:

<style type="text/css">
button.accordion {
background-color:#eee;
color:#444;
cursor: pointer;
padding:18px;
width:100%;
text-align:left;
border:none;
outline:none;
transition:0.4s;
}

button.accordion.active, button.accordion:hover {
background-color:#ccc;
}

div.panel {
padding:0 18px;
background-color:white;
display:none;
}
</style>

<button class="accordion">Text 1</button>
<div class="panel">
<p>Inhalt 1</p></div>

<button class="accordion">Text 2</button>
<div class="panel">
<p>Inhalt 2</p></div>

<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc.onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
</script>

 

[bzwerg]

Das kann ich nur reproduzieren, wenn ich das ganze in ein form-Element lege. Dann ist die Erklärung einfach: Der Default-Typ eines buttons ist "submit", d. h. das Formular wird beim Klicken abgeschickt, was bei fehlendem action-Attribut ein Neuladen der Seite bewirkt. Abhilfe, indem Du den Buttons den Typ "button" gibst.

So etwas kann man auch sehr schön nur mit CSS machen, wenn man den Radiohack anwendet:
https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Akkordeon

Erst Mal vielen Dank. Hab es mit deiner Lösung versucht. Leider verschiebt sich das ganze Fenster bei Nutzung der Ankerfunktion. Wenn ich das Element mittig im Bildschirmbereich habe und dann darauf klicke, springt auf der geklappte Text zum oben Bildschirmrand. Ist nicht gerade Userfreundlich.

Ich habe diese Variante genutzt, aber, wie eingangs gesagt, lädt die Seite neu: https://www.w3schools.com/howto/howto_js_accordion.asp

 

[bzwerg]

Richtig, und das ist der Grund, warum ich selber diese Lösungen mit :target nicht liebe.
Auf der selben Seite wird jedoch eine Alternative mit dem Checkbox-Hack beschrieben, die problemlos und ohne Nebeneffekte funktionieren sollte:
https://wiki.selfhtml.org/wiki/CSS/...kkordeon#Akkordeon_mit_versteckten_Checkboxen

Ah, hab jetzt die versteckten Checkboxen genutzt, das funktioniert schon besser. Leider richtet sich das Aufklappen nicht nach Größe des Inhalts. Die Box öffnet sich jeweils gleich, egal wie viel Text drin steht. Gibt es dafür auch noch eine Lösung?

 

[bzwerg]

Ja, da gibt es eine Lösung: Man ändert statt height die Eigenschaft max-height:

.akkordeon p {
    overflow: hidden;
    max-height: 0;
    margin: 0;
    transition: all 0.5s ease-in-out;
}

.akkordeon input:checked ~ p {
    transition: all 0.5s ease-in-out;
    max-height: 7em;
}

Nicht ganz perfekt, aber hier wird man mit einer Einschränkung einer CSS-Lösung konfrontiert, nämlich dass man nicht nach height:auto animieren kann.

Prima, das hat funktioniert. Ich musste noch die max-height: auf 50em; erhöhen, dann ging es aber :).

Vielen Dank für die schnelle und sehr gute Hilfe!!