Text zum Ausklappen 
Autor: Malte S.Hallo alle zusammen,
ich versuche gerade die Möglichkeit zu finden Text "einzuklappen", so das ich meine Seite übersichtlicher gestallten kann.
Am schönsten wäre es, wenn der Text nach unten hin langsam unschwarf wird (also verschwimmt) und dann der Hinweis "Hier klicken zum weiterlesen..." kommt und sobald man mit der Maus darüber fährt (oder klickt), der Text nach unten aufgeklappt wird und man, wenn es einen denn interessiert, weiter lesen kann.
Ich hoffe, ich habe mich verständlich ausgedrückt.
Schon einmal vielen Dank für die Hilfe!
Die URL zu meiner Seite: https://www.weiselstube.de/ und es geht zum Beispiel um den Abschnitt "Die Imkerei & Königinnenzucht" https://www.weiselstube.de/dieimkerei.php hier wäre es schön, wenn man beide Text erst einmal eingeklappt vor findet, so das beide zu gleichen Teilen, je nach Auflösung des Bildschirms, zu sehen sind und beide nach unten ausklappbar sind.
Autor
Die Antwort hier habe ich bereits gefunden https://codepen.io/JoshBlackwood/pen/tmpwq aber irgendwie finde ich die Lösung nicht wirklich hübsch ...
Das von Dir gewünschte "Schönste" kann ich Dir nicht bieten, aber in diesem Post wurde das schon mal angesprochen: https://helpcenter.websitex5.com/de/post/201935
Damit Du nicht alles lesen musst, hier die Lösung die ich verwende:
Die Seite mit dem Klapptext wie folgt bearbeiten:
Dieses Javascript in den Seiteneigenschaften vor dem </body>-Tag eintragen:
<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>
In die Seite ein HTML-Objekt einfügen und im Reiter Erweitert folgenden CSS-Code eintragen:
.textdetail{font-family: Arial;font-weight: bold; font-size: 14px; text-align:left;line-height: 2em; }
.accordion{background-color:transparent;color:#444;cursor:pointer;padding:10px;width:100%;
border: 1px solid gainsboro;margin-bottom: 1em;border-top-left-radius: 5px;
border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
text-align:left;font-family:Arial;font-weight:bold; font-size:14px; text-align:left;line-height:2em;transition:0.4s;}
.active,.accordion:hover{background-color: #ccc;}
.panel {padding:0 14px;display:none;background-color:transparent;overflow:hidden;}
Und im Reiter HTML-Code folgendes:
<button class="accordion">+ Sonntag </button>
<div class="panel">
<br />
Es ist Sonntag
<br />
</div>
<button class="accordion">+ Montag</button>
<div class="panel">
<br />
Montag ist morgen
<br />
</div>
<button class="accordion">+ Dienstag</button>
<div class="panel">
<br />
Dienstag ist übermorgen
<br />
</div>
Autor
Ich seh gerade, das Forum hier nutzt genau den Effekt, den ich gerne hätte: Deine Nachricht wird nach unten hin transparent und damit ich die weiter lesen kann muss ich auf "Mehr lesen" klicken :D.
Das Forum ist nicht von WSX5 gemacht worden, sondern ist eine externe Software die eigens für INCO programmiert wurde. Für Wünsche ist wie üblich eine "Anregung" zu posten.
Malte,
das Forum basiert auf Bootstrap. Könnte man evtl. auch mit einbauen.