Hy

hier ein kleiner CSS-Workaraound mit grosser Wirkung:

Ohne CSS-Formatierung sieht der Accordeon-Effekt nicht gerade sehr benutzerfreundlich drein, das es sich bei den Titeln (class:toggler) nicht um Links handelt.

Folgendes CSS und ein kleines Bild schaffen Abhilfe:

Code:

.toggler{
	font-weight:bold;
	color:#4F9100;
	background:transparent url(ico_plus.gif) left center no-repeat;
	border-bottom:1px #E7E6D3 solid;
	padding-left:21px;
	margin-top:7px;
	cursor:pointer;
	cursor:hand;
}
div.accordion{
	border-left:1px #E7E6D3 solid;
	padding-left:5px;
	margin-left:4px;
}

Die Farben und der Pfad können bei Bedarf angepasst werden.

Viel Spass mit TYPOlight.
cy

Hi cy,

ganz perfekt wird es, wenn Du zusätzlich noch cursor:hand; in der Toggler Klasse verwendest. Dann zeigen nämlich alle Browser das richtige Cursor-Symbol ;-)

Grüße
Leo

Hy Leo

Mensch, bist Du perfekt! Danke für die Verbesserung!
cy

PS: Dein Jedi-Meister Avatar passt eindeutig. *neidlos bewunder*

ähm? was macht das hier genau?

Es sorgt dafür dass die Titelzeile der einzelnen Akkordeons richtig gut aussieht und man sofort erkennt, dass man mit einem Klick darauf was ausklappen kann Schöne Sache das!

ah, ich hatte nicht im blick, was ein akkordeon ist und dachte an etwas musikalisches. ok, ich glaube, ich erahne, welch ein feature ich bislang übersehen habe... :-)

Feature vorschlagen:

Könnte man die Grafik (vielleicht nicht grün, sondern neutral grau oder schwarz), in den Core von TL aufnehmen und die entsprechenden Stylesheet-Definitionen in x-Elements hinterlegen?

Hi zusammen

von mir aus kann die Grafik und das CSS in den TL-Core mit einbezogen werden. Das Problem ist bloss, dass die Core-Grundlage dann nicht mehr neutral gehalten ist. ... Das muss Leo entscheiden.

Gruss
cy

Wo kann man sich denn eine Seite mit diesem Effekt anschauen?

Alles klar. Dankeschön für den Link

Nabend,

jungs, in Module habe ich kein Accordeon, wo bekommsch das denn her?

ich habe dem Seitenlayout mootools_default zugeordnet, sehe in den Modulen aber nichts von mootools.
Kann mir bitte dabei jemand mal kurz helfen?

Gruß

Das findest du bei der Artikelerstellung, nicht bei den Modulen.

Wenn du einen neuen Artikel schreibst und ein neues Element erstellst, dann kannst du unter dem Punkt "Elementtyp > Textelemente" den Eintrag "Akkordeon" auswählen. Das ist alles

Viele Grüße,
Michael

hoi,

ok hab ich mal ausgetestet und sehe das +icon in meinem contentbereich mit dem jeweiligen text dessen, nur fehlt da die Animation. Muss ich sonst noch irgendwo etwas einstellen?

Gruß

Hi shogun

in Deinem Layout muss eines der Mootools JavaScripte ausgewählt sein.

Gruss
cy

Moin Cy,

du meinst im Seitenlayout den Bereich:
Mootools JavaScript
->moo_close_all
->moo_default
->moo_modify_foreground
oder?

Also hier hatte ich bereits modifi_foreground drauf und es lief trotz allem nicht.
Nun hatte ich auf der Seite von Aexes im Quellcode geschaut und gesehen das er dies als <script Aufruf

Code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
	new Accordion($$('div.toggler'), $$('div.accordion'),
	{
		display: false,
		alwaysHide: true,
		opacity: (window.ie ? false : true)
	});
});
//--><!]]>
</script>

direkt im HTML hatte (template). Das hab ich dann ebenfalls gemacht und es läuft nun.

Aber das kann doch nicht der Sinn sein, denn ich wußte ja nichtmal das ich für dieses Accordeon ein solches Script benötige und gäbs das Forum nicht mit diesem Beitrag haette ich das als Bug abgetan.

Summa sumarum, die mootools kann ich also nur verwenden wenn ich die motools js (ich meine nicht das hier:

Code:

<script type="text/javascript" src="plugins/mootools/mootools.js"></script>

(das ist bereits im Template inne)
selber noch dazu einbinde?

Soweit ich das jetzt sehe sind dem Typolight lediglich die Bibliotheksnamen bekannt aber nicht die genauen Scripte dazu?

Oder mache ich hier was grundlegenedes falsch?

Gruß
shoguN