WebSite X5Help Center

 
Robert V.
Robert V.
User

Klappentext in Seite einfügen  de

Autor: Robert V.
Visited 1130, Followers 1, Udostępniony 0  

Hallo Leute,

ich möchte in einer Seite einen Klappentext einfügen.

Das soll in etwa so aussehen:

Wenn man auf das "Plus" von 2. klickt ...

...soll sich der Klappentext öffnen

Wenn man auf das "Plus" von 3. klickt soll sich dieser Klappentext öffnen und der Klappentext von 2. automatisch schließen

Gibt es in X5Pro dafür eine Funktion oder hat zufällig jemand einen Code dafür?

Posted on the
4 ODPOWIEDZI - 2 USEFUL - 1 PRAWIDłOWA ODPOWIEDź
Franz-Josef H.
Franz-Josef H.
Moderator

Einerseits kannst Du das Zusatz-Objekt "Accordion Text / FAQ" kaufen - > https://market.websitex5.com/de/objekte/vorschau/526c4939-3abc-41c3-b34a-37baa6a14af

Andererseits erstellst Du eine Seite mit Klapptext mit folgendem Code:

Dieses Javascript in den Seiteneigenschaften im Bereich "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 dort 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 des HTML-Objekt 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>

Czytaj więcej
Posted on the from Franz-Josef H.
Robert V.
Robert V.
User
Autor

@Franz-Josef H. /René W.

Das Zusatz-Objekt "Accordion Text / FAQ" wäre genau das was ich suche und ich wäre auch gerne bereit dafür zu bezahlen, nur ist das für meine Version 2020 nicht verfügbar!  Dafür eine neue Version von X5Pro kaufen zu müssen ist nicht nachvollziehbar.

@ Franz-Josef H./JJ. JUAG

Danke für die Codes! 

Czytaj więcej
Posted on the from Robert V.