Script zum Verstecken/Ausklappen eines Inhaltes auf der Startseite

Sorry für den blöden Titel dort oben. Gerne ändere ich diesen später dann auch wieder.

Ganz unten in der Nachricht auf der Startseite kann man im Französischen und Spanischen Support-Forum eine Ein/Ausklappfunktion für einige Inhalte sehen. Diese sind in der Anzeige mit Pfeilen zum Öffnen und Schließen versehen.

Ich habe mir bereits den großen Teil aus dem CSS kopiert und die Pfeil-Grafiken bereits für mein Testforum hier farblich angepasst.
Leider funktioniert das Ganze dort noch nicht so, wie ich es mir vorgestellt habe.

Ich vermute einmal, dass ich noch ein passendes Script dazu benötige. Leider konnte ich keines dazu entdecken.
Mein Französisch und Spanisch.............da führt leider kein Weg dahin, lediglich mit ein wenig Englisch und bereits fast vergessenem Russisch könnte ich dienen.

Vielleicht hat ja jemand einen Tipp für mich.
Sollte das Thema über den eigentlichen Support hinaus gehen und zu viel Mühe machen, dann bitte in den Papierkorb mit dem Thema.

LG inde

Hallo inde,

grundsätzlich sind wir nicht dabei behilflich, solche Inhalte aus fremden Foren auszulesen, da das gegenüber den Erstellern in den meisten Fällen nicht in Ordnung ist.
Da es sich hierbei aber um einen Code aus dem offiziellen Forumactif-Supportforum handelt, denke ich, geht es in Ordnung, dir damit weiterzuhelfen.

Zunächst gehst du zu
AB -> Module -> HTML und JAVASCRIPT -> Javascript Codes Verwaltung,
überprüfst dort die Einstellung
Die Javascript-Code Verwaltung aktivieren: Ja,
und erstellst über Ein neues Javascript erstellen ein Script mit der Platzierung Auf der Startseite und diesem Code:

Code:

function dispindex(cat){$('#indexmenu > div.acc-seemore').slideUp(500);$('#catindex'+cat).slideDown(900)}function chgclass(){$('a.indtitl').removeClass("acc-open")}

Nach dem Bestätigen kannst du die HTML-Struktur z.B. unter
AB -> Anzeige -> Startseite -> Allgemeines -> Nachricht auf der Startseite
einsetzen. Das Schema dieser Struktur sieht folgendermaßen aus:

Code:

<div id="indexmenu">
<a onclick="dispindex(1); chgclass(); $(this).addClass('acc-open');" class="indtitl">TITEL 1</a><br /><div id="catindex1" class="acc-seemore" style="display: none;">INHALT 1</div>
<a onclick="dispindex(2); chgclass(); $(this).addClass('acc-open');" class="indtitl">TITEL 2</a><br /><div id="catindex2" class="acc-seemore" style="display: none;">INHALT 2</div>
<a onclick="dispindex(3); chgclass(); $(this).addClass('acc-open');" class="indtitl">TITEL 3</a><br /><div id="catindex3" class="acc-seemore" style="display: none;">INHALT 3</div>
</div>

Für weitere Punkte musst du nur diesen Bereich wiederholen und an den markierten Stellen die Nummerierung fortlaufend anpassen:

<a onclick="dispindex(4); chgclass(); $(this).addClass('acc-open');" class="indtitl">TITEL 4</a><br /><div id="catindex4" class="acc-seemore" style="display: none;">INHALT 4</div>

Das dazugehörige CSS werde ich hier nicht posten, da es im typischen Supportstyle gestaltet ist. Aber unter
AB -> Anzeige -> Bilder & Farben -> Farben -> Reiter "CSS Stylesheet"
können folgende Klassen/IDs angesprochen werden, um die einzelnen Bereiche zu gestalten (Farbe, Hintergrund, Abstände, Rahmen etc.):

.indtitl
.indtitl:hover
a.indtitl:focus
a.acc-open
.acc-seemore

#catindex1
#catindex2
...

Liebe Grüße
Günther

Danke Günther,
Du hast Dir ja wieder einmal mehr Arbeit gemacht als es notwendig gewesen wäre.

Wie Du sicherlich sehen konntest hatte ich mir die Klassen bereits gezogen und es fehlte wirklich nur noch das Script.
Die Grafiken hatte ich ja bereits auch schon verändert, die Farben folgen dann dementsprechend angepasst auch noch.

Zwei Klassen schlage ich noch drauf, falls sich noch jemand anderes die Mühe macht und es einbauen möchte.

1. #indexmenu
   
2. #indexmenu a, li.row
   

Nochmals Danke und noch einen schönen Tag für Dich.

LG inde

Das habe ich schon gesehen, aber unsere Supportthemen müssen auch für andere User hilfreich sein und deshalb wollte ich hier auch die HTML-/CSS-Bereiche erklären und nicht nur das Script.

Übrigens hast du in deinem Testforum dort die fortlaufende Anpassung vergessen, sieh mal:

<a class="indtitl acc-open" onclick="dispindex(3); chgclass(); $(this).addClass('acc-open');">Klappe auf 4</a><br><div id="catindex3" class="acc-seemore" style="display: none;">INHALT 4</div>

Freut mich, dass ich dir helfen konnte. Gerne.
-closed-