WebSite X5Help Center

 
Ulrike L.
Ulrike L.
User

Frage zu einer speziellen Darstellung von Texten  de

Autor: Ulrike L.
Visitado 1719, Followers 1, Compartido 0  

Hallo,

ich möchte gern eine Liste von FAQs erstellen, in der die Antwort auf die Frage erst nach Anklicken eines Pfeils o.ä. angezeigt wird. Also in etwas so:

Kann ich das mit WebSite X5 umsetzen und wenn ja, wie? Ich habe dazu leider nichts gefunden.

Danke schon vorab für Eure Hilfe.

Ulrike

Publicado en
4 RESPUESTAS - 1 ÚTIL - 1 CORRECTO
Franz-Josef H.
Franz-Josef H.
Moderator

Folgende Lösung ich verwende ich:

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>

Leer más
Publicado en de Franz-Josef H.
Franz-Josef H.
Franz-Josef H.
Moderator

Stimmt, aber teurer... 

Leer más
Publicado en de Franz-Josef H.
Ulrike L.
Ulrike L.
User
Autor

Vielen Dank für Eure Hilfe. Damit komme ich weiter.

Ulrike

Leer más
Publicado en de Ulrike L.