[phpBB3] Ein-Ausklappfunktion für Kategorien über einen Schalter

Beim herumstöbern bei den anderen Formieren-Support-Foren ist mir bei dem Englischensprachigen Forum sowie dem Italienischem Forum aufgefallen, dass sich dort die Kategorien mit Hilfe eines Schalters ein- und ausblenden lassen. Da der Style in diesen Foren der selbe wie hier ist, bin ich einmal davon ausgegangen das es sich auch um BB3-Foren handelt.

Bei unseren Tipps & Tricks zu der Einklappfunktion der Kategorien und auch bei der Verbesserung der Funktion ist dies leider nicht möglich.

Im Englischen Forum habe ich gesehen, dass dort zusätzlich eine class und natürlich die entsprechenden Grafiken vergeben wurden.

Code:




Sicherlich fehlt hierzu noch ein Script für ein Modul oder aber eine Seite.

Ich würde dies gerne auch in meinem Forum umsetzen.
Somit wäre gewährleistet, dass die User die Einklappfunktion auf Anhieb verstehen ........ohne dass man es erklären müsste.

Könntet ihr mir vielleicht bei der Umsetzung behilflich sein

LG inde

Hallo inde,

dazu wurden im englischen Support folgende Codes verwendet:

Zuerst gehst du zu
AB -> Module -> HTML und JAVASCRIPT -> Javascript Codes Verwaltung
und machst dort folgende Einstellung:
Die Javascript-Code Verwaltung aktivieren: Ja
Anschließend klickst du auf "Ein neues JavaScript erstellen", wählst dort
Platzierung: Auf der Startseite,
gibst einen beliebigen Titel ein und fügst dieses Script ein:

Code:

function toggleLTcategory(cid,iflag){var cat=document.getElementById(cid);var button=document.getElementById('b'+cid);if(cat.style.display=='none'){cat.style.display='block';button.className='contract';my_setcookie('_'+cid,'',true)}else{cat.style.display='none';button.className='expand';my_setcookie('_'+cid,'1',true)}}$(function(){x=$('ul.topiclist li.header').get();for(i=0;i<x.length;i++){x[i].style.position='relative';var cid='c'+String(i+1);x[i].parentNode.nextSibling.setAttribute('id',cid);x[i].parentNode.nextSibling.style.display='block';var y='<div id="b'+cid+'" class="contract" onclick="toggleLTcategory(\''+cid+'\');"></div>';x[i].innerHTML=x[i].innerHTML+y}cookies=document.cookie.split('; ');for(i in cookies){if(cookies[i].charAt(0)=='_'){cookie=cookies[i].split('=');if(cookie[1]=='1'){cid=cookie[0].substring(1);if(document.getElementById(cid)){toggleLTcategory(cid,'x')}}}}});

Nun klickst du auf "Bestätigen".

Der zweite Schritt besteht aus einem CSS-Eintrag, welcher den aus dem Script zugeordneten Klassen für die aus- bzw. eingeklappte Kategorie jeweils ein anderes Hintergrundbild (Plus-/Minus-Button) zuweist.
Dazu fügst du unter
AB -> Anzeige -> Bilder & Farben -> Farben -> Reiter "CSS Stylesheet"
folgenden Code ein:

Code:

.expand, .contract {position: absolute; top: 6px; right: 10px; cursor: pointer; width: 9px; height: 9px; background: url(http://2img.net/i/fa/m/tabs_more1.gif);}
.contract {background: url(http://2img.net/i/fa/m/tabs_less1.gif);}

Die verwendeten Buttons sollten gut passen, bei Bedarf siehst du aber sicherlich, an welchen Stellen du die Grafikurls austauschen kannst. Die erste Grafikurl ist für den Plus-, die zweite für den Minusbutton verantwortlich.

Diese Umsetzung funktioniert reibungslos, viel Spaß damit!

Liebe Grüße
Günther

Danke, es hat auf Anhieb geklappt, ich ändere nur noch die Grafiken passend zum Forum.



LG inde

Aber gerne doch.
-done-