vertikales Akkordeon

[maxpress]

Hallo zusammen,

ich bräuchte für eine Internetseite ein vertikales Akkordeon.
Kann man das vorhandene Akkordeon so einstellen, dass es vertikal bzw. von links nach rechts aufgeht oder gibt es vielleicht ein passendes Modul für die Version 3.2.1?

Über eine Antwort würde ich mich sehr freuen.
Vielen Dank im Voraus.

[wulf]

Vertikal sind Accordions doch standardmässig, meintest du vielleicht horizontal ?
http://webdesignandsuch.com/top-20-h...-for-websites/

[derRenner]

Hallo,

schau dir den dk_caroufredsel slider und dieses Beispiel dazu an - mag ja sein, dass du dein Vorhaben auch damit umsetzen kannst/möchtest.

[joe]

Moin,

Ich hab mal eben schnell eine Demo fertig gemacht wie man das ganze mit dem Standard Mootools Accordion lösen kann:

http://jsfiddle.net/sRM8K/

Cheers Joe

[Andreas]

...Kann man das vorhandene Akkordeon so einstellen, dass es vertikal bzw. von links nach rechts aufgeht...

Ja, das kann man. Contao-Wiki: Akkordeon horizontal

[maxpress]

Vielen lieben Dank, für eure Hilfe!!
Es hat funktioniert.

[maxpress]

Hallo zusammen,

ich hätte mal noch eine Frage

@joe: Wie bekomme ich das hin, dass ich das Öffnen beim Start deines Akkordeons (beispielsweise soll bei mir der dritte Toggler beim Start als erstes aufgehen) steuern kann?

Jeder andere darf sich natürlich auch melden!

[wulf]

bei jquery über die option active (active:2 öffnet 3tes Element)
bei mootools über die option display( display:2)

[kleppi]

He Joe,

schöne Demo, auf meiner Seite http://joggen-in-nrw.de werde ich das Akkordeon für einen Laufbericht einsetzen.

Gruß kleppi

[maxpress]

Hey wulf,

vielen Dank für deine Antwort.

Ich arbeite allerdings mit dem Akkordeon von joe, also mit diesem Script:

<script>
var myAccordion = new Fx.Accordion($$('.toggler'), $$('.accordion'), {
collapsible: true,
    width: true,
    opacity: false,
    initialDisplayFx: false,    
    fixedWidth: 841,
    height: false,
    
    onActive: function(toggler, accordion) {
        toggler.addClass('open');
    },
    onBackground: function(toggler, accordion) {
        toggler.removeClass('open');
    },
    

});
</script>

Wo müsste ich dies, in diesem Script, einfügen?

[wulf]

http://jsfiddle.net/sRM8K/7/

[maxpress]

Hallo nochmal,

vielen Dank für eure Einwände und Tipps, hat auch alles sehr gut funktioniert.

Nun klappt der gewollter Toggler auf, nur leider nimmt er den Inhalt nicht mit und es wird so immer noch der Inhalt der ersten Seite aufgerufen.

Hier mal einen Link der betroffenen Seite maxpress.de
Normalerweise müssten, wenn man mit der Maus über die Vögel fährt, MouseOver erscheinen. Nun ist es erst dann so, wenn man auf den Toggler "Startseite" klickt.

Wie kann ich das ändern?

[Andreas]

Es ist schwer zu debuggen, wenn du so viele Fehler da einbaust

Javascript:

TypeError: $(...) is null
http://maxpress.de/
Line 1181
$("#youdivid").msAccordion();

HTML:

Result: 70 Fehler / 10 Warnungen

Info: W3c Online Validation

line 46 column 99 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 48 column 122 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 63 column 101 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 69 column 48 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 76 column 59 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 83 column 57 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 90 column 59 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 103 column 58 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 110 column 55 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 117 column 65 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 127 column 59 - Fehler: Duplicate ID accordion-element_gelb.
line 43 column 59 - Warnung: The first occurrence of ID accordion-element_gelb was here.
line 129 column 47 - Fehler: Duplicate ID accordion_gelb.
line 45 column 47 - Warnung: The first occurrence of ID accordion_gelb was here.
line 130 column 99 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 134 column 184 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 137 column 175 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 140 column 171 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 143 column 189 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 146 column 164 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 149 column 151 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 162 column 62 - Fehler: Duplicate ID accordion-element_schwarz.
line 57 column 62 - Warnung: The first occurrence of ID accordion-element_schwarz was here.
line 164 column 50 - Fehler: Duplicate ID accordion_schwarz.
line 59 column 50 - Warnung: The first occurrence of ID accordion_schwarz was here.
line 166 column 100 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 197 column 59 - Fehler: Duplicate ID accordion-element_gelb.
line 43 column 59 - Warnung: The first occurrence of ID accordion-element_gelb was here.
line 199 column 47 - Fehler: Duplicate ID accordion_gelb.
line 45 column 47 - Warnung: The first occurrence of ID accordion_gelb was here.
line 222 column 50 - Fehler: Duplicate ID accordion_schwarz.
line 59 column 50 - Warnung: The first occurrence of ID accordion_schwarz was here.
line 234 column 119 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 234 column 175 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 236 column 140 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 236 column 197 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 238 column 152 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 238 column 208 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 240 column 167 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 240 column 225 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 242 column 168 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 242 column 227 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 244 column 167 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 244 column 225 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 246 column 153 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 246 column 211 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 248 column 163 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 248 column 217 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 250 column 140 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 250 column 196 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 252 column 165 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 252 column 221 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 254 column 163 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 254 column 217 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 256 column 152 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 256 column 208 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 258 column 164 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 258 column 219 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 260 column 165 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 260 column 221 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 262 column 165 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 262 column 221 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 264 column 166 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 264 column 223 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 266 column 173 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 266 column 227 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 268 column 166 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 268 column 224 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 270 column 166 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 270 column 223 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 272 column 153 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 272 column 210 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 274 column 165 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 274 column 221 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 276 column 138 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 276 column 192 - Fehler: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
line 1167 column 20 - Fehler: Duplicate ID top_image.
line 30 column 20 - Warnung: The first occurrence of ID top_image was here.

Zusätzlich solltest du wissen, wie man SCRIPTs für jQuery und MooTools richtig einbindet, wenn du beide Bibliotheken benutzt. Siehe in den j_xxx und moo_xxx Templates.

Bei den Javascript-Plugins solltest du wissen wofür die gut sind und dich für diejenigen entscheiden, welche du einsetzen möchtest und nicht einfach alles im Layout anhaken.

Einiges könnte man bestimmt geschickter machen als wie du es umgesetzt hast. Aber du kannst mal versuchen den As, die das HOVER haben entweder das position:relative; zu nehmen, oder ihnen display:block; zu geben. Sieht irgendwie so aus, als hätten deine As keine Fläsche (Ausdehnung, Dimension).

[maxpress]

Hallo,

vielen Dank für den Hinweis.
Jetzt müssten alle Fehler bereinigt sein und position:relative; / display:block; habe ich auch ausprobiert, funktioniert leider auch nicht.

Ich habe die Script-Schnipsel von wulf einmal in meiner Contao-Installation so ausprobiert, wie sie dort dargestellt sind.
Dort verschwindet beim neuladen auch der Inhalt des letzten Togglers.

Liegt das vielleicht an meinen Einstellungen?

[Andreas]

So siehts besser aus. Jetzt hast du noch eine doppelte ID - #top_image.

Deine As sind in einem DIV #accordion_schwarz_start, welcher keine Höhe hat, aber overflow:hidden, opacity:0 und visibility:hidden. Deswegen hast du auch keinen hover-Zugriff auf die As.

Evtl. liegt das daran, dass du das Accordion 2mal aufgesetzt hast.

...
new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
...
var myAccordion = new Fx.Accordion($$('.toggler'), $$('.accordion'), {
...

Es wird beides mal auf die gleichen Elemente aufgesetzt div.accordion und .accordion sind in deinem Fall die gleichen Elemente.

Einmal hast du das Accordion nach domready aufgesetzt (richtig) und einmal nicht.

Man kann ein Accordion mehrmals aufsetzen, falls man noch Accordions mit anderen Optionen haben möchte , sollte dann aber auch verschiedene Elemente ansprechen.

ps Was ich nicht verstanden habe ist, wie du den Hover-Effekt über den bestimmten Hintergrundbereichen aktivierst, wo deine As, welche den Hover auslösen doch gar nicht positioniert sind, sondern oben inline stehen.