Accordion Text 
Author: Reinhard G.
Visited 3049,
Followers 2,
Shared 0
Hallo,
dass das Zusatzobjekt "Accordion Text" nicht der Brüller ist, wissen wir ja jetzt mittlerweile alle und müssen damit leben. Trotzdem schnell eine Frage. Entweder sehe ich im Moment den Wald vor lauter Bäumen nicht aber wie kann man denn eine zusätzlich Box (>15) generieren?
Posted on the
Da wo Box steht und Kategorie
Gruß
Andreas
Author
Hallo Andreas, sorry, stehe da jetzt auf dem Schlauch. Dort wo BOX und KATEGORIE steht kann man über den Pfeil nach unten nur bis zur 15. Box auswählen. Ich möchte aber weitere anlegen.
Mach doch einfach einen weiteren Accordion Text
Wenn man weiss wie, kann auch ein Link eingebaut werden:
https://watelet.ch/verlinkungen-test.html
Ich könnte mir auch einen Link, in der letzten Box vorstellen, welcher einen weiteren Accordiontextblock öffnet.
Aber es gilt auch zu beachten, dass zuviele Boxen, ein Problem sein können.
Stichwort "responsive".
ok verstanden ...
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<p>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.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>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.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>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.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
Pack das mal in einem Text oder HTML-Objekt rein. Beim Text-Objekt musst Du auf HTML umstellen mit dem Symbol <>
Von <Button....bis zum /div ist jeweils immer ein Accordion Text.
Gruß
Andreas
Die Zeilen
</head>
<body>
müssen aber weg gelassen werden, sonst gibt es Durcheinander!
Für mein obiges Beispiel steht das jeweils direkt in der Textbox:
Oase AquaSkim 40
Möglichkeiten wie man diesen Abschäumer in einer Wassertiefe von 1.40 m installieren kann.
Hier geht es zur Seite: <a href="https://www.watelet.ch/skimmer.html"><font color="#000000"><b>Abschäumer</b></font></a>
@Franz-Josef ... stimmt
Wenn die Seite mit fullheight erstellt wird, kann es Probleme geben.
Je nach Grösse des Textes in der jeweiligen Textbox.
Fullhight ist noch nicht ausgereift, mein Beispiel ist nicht Fullheight.
https://watelet.ch/verlinkungen-test.html
Z.B.: diverse Seiten
Author
Hallo Rene,
na, das sieht ja super aus, fast!
1. Wenn ich es als Text reinstelle und auf html umstelle erscheint das Layout aber nur die Zeilen mit den Titeln. Die Accordions gehen nicht auf.
2. Wenn ich es als html-code einstelle funktioniert es. Aber auch nur fast. Beim Öffnen des 2. Accordions bleibt das 1. offen. Man muss es mit einem Klick zumachen. Beim "Original" gehen die alten automatisch zu.
3. Wie verhält sich eigentlich ein html-Objekt bei einem Update? Wird das was überschrieben, muss man es neu generieren? Oder passiert nix?
Gruß Reinhard und danke für deine Mühe.
Es funktioniert erst wenn die Seite online ist.
Danach funktioniert es dann auch in der Vorschau.
Ein Update überschreibt das nicht.
Jede Textbox benötigt einen eigenen Titel, auf das muss geachtet werden.
Der gleiche Titel darf nicht zweimal verwendet werden.
Der Stil solltest Du auch nach deinem Gusteau auswählen.
Siehe Details im Anhang
Ab und zu fragte ich ich mich wieso Inco von euren Texten nicht lehrt und die Widgets einfach damit optimieren.!
Das fragen sich Viele. Ich kenne kein einziges Tool welches nicht einen Mangel hat.
Author
Hallo Rene,
ist online, quasi Test. Schau es dir doch bitte mal an:
https://weitzelweine.de/hinweis.html
Es funktioniert auch online nicht, die Sache mit dem autom. Zugehen. Kann ja auch sein, dass es so gewollt ist, oder?
Author
In der Tat, viele haben viele Mängel. So auch z.B. die Ankergeschichte, da liege ich auch im Clinch. Das ist ein kleines Chaos. Normal gehört dieses Tool stillgelegt, weil es absolut nicht 100pro funktioniert. Aber das ist jetzt eine andere Baustelle.
Ich sehe dein Problem, kann es aber nicht sehen was Du gemacht hattest.
Mein Vorschlag:
Mache einen komplett neuen Accordinext in ein leeres Feld auf deiner Seite.
Dann nimmst Du mein Beispiel aus dem letzten Anhang.
Machst alle Einnstellungen exakt nach meinem Beispiel.
Zuerst nur eine Textbox (Textbox 1).
Wenn Du dies in allen Punkten befolgst wird es funktionieren.
Und wenn es dann funktioniert kannst Du die Einstellungen (Schrift, Farbe, Stile etc.) so anpassen wie Dir das gefällt.
Wenn das erledigt ist, kannst Du die nächste Textbox(2) mit dem neuen Titel erstellen.
Den Text etc. aus Textbox 1 in die Textbox 2 rein kopieren und den Link anpassen.
USW
Ich sehe in deinem Bild diverse Differenzen zu meinem Bild.
Ist das das gleihe Tool???
Beite: die Zahl muss nach deinem Template angepasst werden.
feste Höhe kein Haken setzen
Sehe nicht
Optionen Box beim Start geöffnet, dort muss stehen Kein
Übergangsdauer (ms): 400
Mein bester Kumpel hat mir einen Skript enfachen Skribt geschieben um top to scrol langsamer zu machen...
https://www.hotel-gabriel.ch/willkommen.html
Wäre auch nicht so ein Ding
Hallo Reinhard, ich glaube da ist eine Verwechslung passiert. Du hast den Code eingetragen, den Andreas L beschrieben hat, allerdings ohne den Hinweis von mir zu berücksichtigen. René schreibt von gewissen Einstellungen des Accordion-Objekts, die er vorgenommen hat.
Die Zeilen
</head>
<body>
müssen aber weg gelassen werden, sonst gibt es Durcheinander!
Aber was will denn Reinhard G. wirklich?
Ich denke, dass je mehr hier etwas schreiben, die Verwirrung grösser wird.
Auch das eigefügte Bild vonn AndreasL. ist dubios, es weicht von meinem stark ab.
Zudem müsste ein User wissen,was der Ellenlange Code im Detail bedeutet.
Wenn Ihr schon mit Codes spielt und es haut nicht so hin wie es soll, dann schaut auch mal dieses an und dort könnt ihr probieren und danach in WSX5 einfügen.
https://jsfiddle.net/chufol/dJF5r/
@René: Da Reinhard den Code von Andreas L. in seiner Seite eingetragen hat, ist davon auszugehen, dass er diesen zumindest ausprobieren wollte. Nur hat er nicht berücksichtigt, die beiden von mir genannten Zeilen zu löschen. Darauf habe ich reagiert.
Wenn Du obenlesen würdest, so hatte ich das bereits, repetitiv bekannt gegeben.
Author
Guten Morgen an Alle, die mir versuchen zu helfen.
Franz-Josef hat's erkannt. Man soll um Mitternacht nix mehr arbeiten
Ich habe den Code von Andreas L. genommen und Rene darauf angesprochen, sorry.
Rene - nach deinen Vorgaben funktioniert es. Mir ginge es aber darum, dass ich über die Defaulteinstellungen hinaus (max. 15) weitere Boxen anlegen wollte. Und da finde ich keinen Weg. Oder einen neuen Accordion Text zu implementieren.
Mit dem Code von Andreas L. komme ich auch klar. Gefühlt kann man da unendlich viele Boxen anlegen. Hier ist aber das Manko, dass sich z.B. Box 1 nicht schließt, wenn Box 2 geöffnet wird. Ich hab den Code 1:1 kopiert und auch mal die Zeilen "</head><body>" gelöscht, bringt aber nix.
Fazit: Ich generiere mehrere Accordions, z.B. 3 Mal 15 oder nehme den Andreas L.-Code, wenn wir die Automatik des Schließens noch hinbekommen
Vielen Dank für euer Interesse und habt einen schönen Tag.
Rene - nach deinen Vorgaben funktioniert es. Mir ginge es aber darum, dass ich über die Defaulteinstellungen hinaus (max. 15) weitere Boxen anlegen wollte.
Ob das Sinn macht ist eine andere Frage.
Aber zumindest theoretisch kannst Du das ins Unendliche treiben:
https://Testseite.watelet.ch/
Author
Hallo Rene,
so, das Ding ist in trockenen Tüchern. Ich habe jetzt für 17 FAQ's 2 Accordions eingestellt. Das 1. mit den max. 15 Boxen und ein 2. mit nochmals 2 Boxen. Damit kann ich jetzt leben. Trotzdem würde mich interessieren, wie du im o.g. Beispiel in einem Accordion 20 Boxen hinbekommen hast. So sieht es ja zumindest aus. Wo ist bitte der Trick
Ganz einfach:
Damit es aus einem Guss ausschaut:
unterer Accordion Text
Erstellen der Seiten
Ränder, oben 0
Dann ist keine Lücke dazwischen.
Einen Haken hat es: die beiden Accordion Texte kommumizieren nicht miteinander.
Das heisst, wenn das Accordion 2 geöffnet wird, wird Accordion Text 1 nicht geschlossen.
Aber leider müssen wir mit Schönheitsfehlern leben.
Author
Hallo Rene,
genial, du bist der Größte
merci.
Schöne Feiertage und einen guten Rutsch.
LG Reinhard
Guten Morgen Reinhard
Lieben Dank, aber der Grösste bin ich nicht.
Gerne wünsche ich auch Dir besinnliche Weihnachten und alles Gute für das kommenede Jahr.
Wenn die Angelegenheit für Dich abeschlossen ist, so solltest Du dies hier noch abschliessen.