Accordeon (Scriptfehler?)

[update]

Also, das template wird solange rotiert (abgearbeitet), bis keine Frage mehr bleibt. Das bedeutet, dass die id von dem äussersten umschliessenden div ebensolange wiederholt wird --> Du findest dann einen Haufen id=accordion".
Da eine ID aber pro Seite nur einmal vergeben weden kann (sollte, nach Spezifikation), produziert das so viele Fehler wie IDs da sind (natürlich wird die Seite dargestellt, die Browser können teilweise schon was vertragen)
Die anderen IDs hast Du rausgenommen --> weniger Fehler/Warnungen - soweit sogut.

Deshalb hatte ich neulich das umschliessende Did id=... um den {CONTENT} gewrappt (Nachteil: ich brauche ein Extratemplate für die FAQ - Vorteil: ich kann die FAQ paginieren)

Mit dem CUSTOM BLOCK meinte ich Folgendes:
im Template einen CUSTOM BLOCK mit dem Inhalt

Code: Select all

<div id="accordion-box">{MYACCORDION}</div>
</div>

und in den Ausgabebereit den Platzhalter (zB unter {CONTEN}): {MYACCORDION}
Jetzt kann ich die Ausgabe beim Artikel- CP FAQ bestimmen: soll nach {MYACCORDION}
Das Template sieht dann so aus:

Code: Select all

   [FAQ_QUESTION]<h3 class="toggler atStart">{FAQ_QUESTION}</h3>[/FAQ_QUESTION]
   <div class="element atStart">
             [FAQ_ANSWER]
                     <div class="faqAnswer">
           [FAQ_IMAGE]
                         <div class="faqImage">
           {FAQ_IMAGE}
                             [FAQ_CAPTION]
               <div class="faqCaption">
                             {FAQ_CAPTION}
                             </div>
                             [/FAQ_CAPTION]
           </div>
                         [/FAQ_IMAGE]
       {FAQ_ANSWER}
                     </div>
             [/FAQ_ANSWER]
         </div>

Nachteil: keine Paginierung, da diese wohl nur im {CONTENT} stattfinden kann...

Hab's noch nicht probiert, aber müsste so gehen.

BTW: hast Du mal testweise ein Bild eingefügt? Bei mir lief das super im FF usw, bis der IE6 daherkam - wollte erst das Bild nich mit in den hidden Bereich des Togglers reinziehen - elend...

[godmd]

Bild testweise eingefügt.
Bei Frage 2 durch Verwendung der Felder "Bild" und Bildunterzeile" = Bild wird im BE gezeigt, im FE nur ein Platzhalter (warum???), Bildlegende ist da.
Bei Frage 3 durch Einfügen des Bildes in den Editor (was wieder blöd ist, weil anderes Bildverzeichnis) = und Bild ist da.

Wenn du das löst mit zwei RTs, {CONTENT} und {MYACCORDION}, wo definierst du dann, was {MYACCORDION} darstellen soll?
Und wo hast du jetzt den Tag <div id="accordion">?

Die Möglichkeit der Paginierung klingt im ersten Moment gut, aber ich biete sowas lieber auf einer Seite an, solange es nicht mehrere Hundert FAQs sind, da der User so die Browser-Suche verwenden kann. Das find ich persönlich sehr praktisch, wenn ich was suche. (In meinem konkreten Fall sind's ja Termine ...)

Anke

EDIT:
Neues Bild hochgeladen - jetzt geht's.

[update]

Schreibfehler: sollte nicht accordion-box heissen, sondern accordion. Und seltsamerweise geht das bei Dir mit dem Bild - bei mir guckt das immer raus (im IE6)

[godmd]

Dazu hab ich in der faq_accordeon.tmpl ein <div style="clear:both;"></div> unten angefügt

und in der CSS ein float definiert:

.faqImage {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}

So ging's.

[Jensensen]

[x]

[update]

Danke - hab's grad auch (wieder) hinbekommen

Und so geht's mit dem CUSTOM BLOCK:
Einen Custom Block definieren, zB {MOO1}
Dieses im Hauptbereich (Template) plazieren (oder wo immer die Ausgabe sein soll)
Im Definitionsfeld {MOO1} steht <div id="accordion">{MOO1}</div>
Jetzt mache ich mir lauter solche Teile, zB 10 Stück und plaziere die im Template überall in allen Spalten...
Der Ausgabebereich für den CP FAQ (zum Beispiel) ist dan entweder MOO1 oder MOO2 oder... (aber immer nur 1 Mooo pro Seite, sonst ists nicht valide)
Wenn ich mir jetzt für andere CPs mooifizierte Templates baue, kann ich überall in meine Seiten egal wo Akkordeon spielen, bis zum Erbr.chen mit was für CPs auch immer (naja muss man testen, welche das dann mögen)
Nur paginieren geht nur im {CONTENT}, aber na gut...

Danke für Deine /Eure Geduld, jetzt sind wir schon wieder ein paar cm weiter

PS: ist ja eigentlich in Wirklichkeit nur Spielerei, aber eine nette...

[update]

und so sieht das Template jetzt aus:

Code: Select all

   [FAQ_QUESTION]<h3 id="faq_id{FAQ_ID}" class="toggler atStart">{FAQ_QUESTION}</h3>[/FAQ_QUESTION]

    <div class="element atStart" id="faqAnswer_id{FAQ_ID}">
         [FAQ_ANSWER]
         <div class="faqAnswer">
                        [FAQ_IMAGE]
                        <div class="faqImage">
                        {FAQ_IMAGE}
                                            [FAQ_CAPTION]
                                            <div class="faqCaption">
                                            {FAQ_CAPTION}
                                            </div>
                                            [/FAQ_CAPTION]
                        </div>
                        [/FAQ_IMAGE]
         {FAQ_ANSWER}
         </div>
         [/FAQ_ANSWER]
         </div>

bzw statt <div class="element atStart" id="faqAnswer_id{FAQ_ID}"> geht auch <div class="accordion atStart" id="faqAnswer_id{FAQ_ID}">, scheint auf "element" nicht so Wert zu legen, oder?

[godmd]

Da hätt isch doch gern noch mal en problem, Jens - oder auch Claus ... Ich kenn mich doch leider mit JS nicht aus.

Wie kann/muss ich denn den Skripteintrag im <head> ändern, um die dort angegebenen Farben nu konsequenterweise auch über die CSS-Datei zu regeln?

Anke

[Jensensen]

Code: Select all

 [x]

[update]

Also das kann tatsächlich in der CSS Datei bestimmt werden, wie das aussehen soll - und wenn Dir die Klassen nicht reichen, baust Du einfach noch einen Arm voll is Template ein

Übrigens: mit

Code: Select all

<script type="text/javascript">
	window.addEvent('domready', function(){
		var accordion = new Accordion('h3.atStart', 'div.atStart', {
			opacity: false, duration: 1000,
			onActive: function(toggler, element){
				toggler.setStyle('color', '#ff3300');
			},
			onBackground: function(toggler, element){
				toggler.setStyle('color', '#222');
			}
		}, $('accordion'));
	});
</script>

duration: 1000 kann ich jetzt bestimme, wie lange das Script MOOOOen soll - also 2sec ist dann schon lang in dieser schnellebigen Zeit

[Jensensen]

[x]

[update]

Genau!

[update]

Und wie kann man dem Akkordeon jetzt noch zusätzlich beibringen, sich auch wirklich wie ein solches zu benehmen: beim Klick auf das geöffnete Teil soll's auch wieder zu gehen (es gibt bei den Mootools so was, ich konnte nur nicht genau rausfummeln, wie...)

EDIT: und dann habe ich das hier gefunden: http://www.stickmanlabs.com/accordion/
Die scriptaculous library scheint ja auch "on board" zu sein.. fein fein, Akkordeons in Akkordeons und keuz und quer... mal sehen ....

[godmd]

Hey, das ist ja oberaffencool! Schade, dass ich mich erstmal dem Fiskus widmen muss ...

[Jensensen]

nee, klappt auch so:
[x]