Accordion für Contentseite

[martin-schulz1]

Hallo XTC'ler

Ich bin Grade dabei meinen Shop anzupassen und komme nun nicht weiter.

Ich habe im bestellprozess die Erweiterung des Accordeons aus diesem Thread http://www.modified-shop.org/forum/index.php?topic=12994.0 erfolgreich eingebaut.

Nun möchte ich die Funktion des Accordion auch in meiner Contentseite bei mir FAQ http://www.labelstore24.de/shop_content.php?coID=25 implementieren.

Zur Zeit nutze ich eine unschöne Variante der Anker links.

ich habe schon versucht in der General.js.php eine neue accordeon klasse zu erstellen und per HTML im Content die dazu passenden div und ul Elemente einzufügen bekomme aber einfach kein 2 accordeon hin.

kann mir jemand weiterhelfen.

Linkback: https://www.modified-shop.org/forum/index.php?topic=19345.0

[noRiddle (revilonetz)]

Dafür ist die jQuery_ui viel zu komplex. das geht ganz einfach mit der Basis jQuery-Bibliothek.

Du generierst z.B. folgendes HTML

Code: XML  [Auswählen]

<div class="YOUR_CLASS">
    <h3>Blabla</h3>
    <div>DEIN_INHALT</div>
    <h3>Blabla</h3<
   <iv>DEIN_INHALT</div>
    <h3>Blabla</h3<
   <div>DEIN_INHALT</div>
    <h3>Blabla</h3<
   <div>DEIN_INHALT</div>
</div>

(geht natürlich auch mit <p> anstelle von <div>)

und lädst abhängig von der Seite auf der man gerade ist folgendes script in den head-Bereich (/includes/header.php)

Code: XML  [Auswählen]

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
   $(".YOUR_CLASS div").hide();
   $(".YOUR_CLASS h3").click(function(){
       $(this).next("div").slideToggle(1000).siblings("div:visible").slideUp(1000);
   });
});
/* ]]> */
</script>

YOUR_CLASS ist dabei eine von dir vergebene Klasse der du, wie auch allen anderen Elementen im CSS Styles vergibst.

So einfach ist das.
Nach meiner Meinung müsste man auch die product_info_accordeon.html so einfach aufbauen, ohne das komplexe jQuery_ui.

Das ganze kann man noch erweitern, indem man dem Javascript noch folgendes hinzufügt (innerhalb von $(document).ready )

Code: Javascript  [Auswählen]

    if(hash!=''){
        $(hash).bind('click',function(e){e.preventDefault();}).trigger('click');
    }

Dann kann man sogar direkt in einen Accordeon-Inhalt hinein linken, indem man den Anker an den Link anhängt.
Also so: LINK#ANKER

Das ganze sollte man eigentlich als Anleitung rausgeben, da es immer so oder so ähnlich verwendbar ist.
Werd ich demnächst mal machen.

Gruß,
noRiddle

*NACHTRAG*
Mit "abhängig von der Seite auf der man gerade ist", meine ich in deinem Fall

Code: PHP  [Auswählen]

if (strpos($PHP_SELF, FILENAME_CONTENT)) {
 SCRIPT
}

damit nicht immer dieser Code geladen wird, auch wenn er nicht benötigt wird,
(auch wenn das bei dem bisschen Code nicht so gravierend wäre).

*Nochmal NACHTRAG*
Die "1000" im Script sind Millisekunden, da kannst du default-Wert wie "normal", "slow" oder "fast" eingeben oder eben Millisekunden wie "1000" oder "2000" usw. .

*NACHTRAG Nummer drei*
Wenn du die Komponenten klug stylst, sieht das ganze auch noch gut aus, wenn Javascript deaktiviert ist.

[martin-schulz1]

Danke für die sehr schöne Anleitung aber leider bekomme ich wen ich nach deiner Anleitung arbeite keinen Funktionierendes Accordion hin. 

Ich habe in der includes/header.php die änderungen übernommen und hochgeladen.

Wen ich mir den online generierten quelltext ansehe ist dies auch zu sehen.

und in der http://www.labelstore24.de/shop_content.php?coID=25 habe im an ende deinen quelltext eingefügt.

Trotzdem kein accordeon.

[noRiddle (revilonetz)]

Du sollst ja auch nicht meinen Code blind kopieren.
Vergib mal einen Klassennamen und ersetze YOUR_CLASS damit,
sowohl im HTML, als auch im Javascript.

Ausserdem hast du Fehler im Code (<iv> statt <div>) und der Container <div class="YOUR_CLASS"> umfasst nicht alle Teile deiner <h3><div> -Komponenten sondern wird nach zweien bereits geschlossen.

*NACHTRAG*
Ausserdem sehe ich gerade, daß dein Javascript-Code nicht im head_Bereich liegt.
Wo hast du den denn implementiert ?

Gruß,
noRiddle

[martin-schulz1]

Okay erst mal ganz GROßEN lieben DANK an noRiddle
zusammen haben wir die Lösung gefunden.

Ich habe die Javascriptanweisung zu weit oben im Header gehabt somit wurde erst nach der Javascriptanweisung die jQuerry Klasse geladen nun geht es.

[noRiddle (revilonetz)]

Gern geschehen.

Ich nehme ja an du arbeitest noch dran,
sage aber trotzdem, falls du nicht dran denkst, daß du irgendwie sichtbar machen mußt, daß man auf die Überschriften klicken soll. Minimum: cursor:pointer;
Hier kannst du ein Beipiel sehen:
Accordeon-Beispiel

Gruß,
noRiddle

[martin-schulz1]

okay habe cursor:pointer; per css implementiert.

was ich habe nicht hin bekomme ist das per css die aktive Überschrift rot bleibt.

Code: CSS  [Auswählen]

div.faq1 h3 {
        cursor:pointer;
}
div.faq1 h3:active {
        color:#b60000;
}

hab ich da einen Denkfehler, oder warum Blitz sie nur kurz auf und bleibt nicht rot stehen.

[noRiddle (revilonetz)]

Der Pseudo-Selektor :active bezieht sich auf den Moment des Aktivseins, also nur in dem Moment man darauf klickt.
Willst du die Überschrift die aktiv ist rot haben, machst du folgendes:
Im CSS eine Klasse active bestimmen

Code: CSS  [Auswählen]

.active {color:#b60000;}

und im Javascript-Code

Code: Javascript  [Auswählen]

/* <![CDATA[ */
$(document).ready(function(){
   $(".YOUR_CLASS div").hide();
   $(".YOUR_CLASS h3").click(function(){
       $(this).next("div").slideToggle(1000).siblings("div:visible").slideUp(1000);
       $(this).toggleClass("active");
       $(this).siblings("h3").removeClass("active");
   });
});
/* ]]> */

Mit diesem "Trick" können auch Pfeilgrafiken eingearbeitet werden, die nach oben oder unten zeigen, je nachdem, ob der Content geöffnet oder geschlossen ist.

Man kann auch bei Öffnen der Seite den ersten Content schon geöffnet haben, indem man folgendes macht:

Code: Javascript  [Auswählen]

/* <![CDATA[ */
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion div:not(:first)").hide();
   //$(".YOUR_CLASS div").hide();
   $(".YOUR_CLASS h3").click(function(){
       $(this).next("div").slideToggle(1000).siblings("div:visible").slideUp(1000);
       $(this).toggleClass("active");
       $(this).siblings("h3").removeClass("active");
   });
});
/* ]]> */

Mit dem Zusatz (hash) den ich bereits gepostet habe, ist, wie gesagt, das direkte Linken in einen Content möglich.

Gruß,
noRiddle

*NACHTRAG*
So wie du's verwendest, solltest du vielleicht p statt div benutzen. Da wäre es dann, falls du mit WYSIWYG_Editor arbeitest, auch einfacher, weitere Punkte hinzuzufügen.

[martin-schulz1]

Okay hat super funktioniert.

Nun noch vieleicht eine nicht so ganz wichtige Frage:

Gibt es auch noch andere Animationen.
Auf einer anderen Seite habe ich so was gesehen wie einen slide nach unten (kein rollen).

Danke

[noRiddle (revilonetz)]

Was nennst du "rollen", was "slide" ?
Ich würde die slideToggle-Funktion (wie auch der Name sagt) als Slide bezeichen...

Gruß,
noRiddle

[martin-schulz1]

Ich weiss nicht ob ich einen anderen Link posten darf.

ich habe dies hier noch gefunden wen du dir die annimation ansiehst vieleicht weisst du dann was ich meine.

http://www.jacklmoore.com/notes/jquery-accordion-tutorial

[noRiddle (revilonetz)]

Und was ist da anders, ausser die Herangehensweise codemässig ?
Du kannst sicherlich noch verhindern, daß wenn ein Spielkind 'zig mal auf ein h3 klickt, sich die Animationen addieren und dann der Content auf - zu - auf - zu geht, indem du noch ein

Code: Javascript  [Auswählen]

.not(':animated').slideToggle()

anhängst, also

Code: Javascript  [Auswählen]

$(this).next("div")..not(':animated').slideToggle();

Aber das ist nicht nötig.
Spiel einfach mal mit den Animationszeiten ein wenig.
Du hast es jetzt so, daß in 400ms der Content öffnet und die Offenen in 1000ms schließen.
mach doch mal beides auf 1500 oder 2000.
Das sieht dann schon sehr "smooth" aus.

Einziges Problem könnte sein, wenn du dem aufslidenden Element ein padding unten gibst, dann springt die Animation am Ende.
Das kann man umgehen, indem man jedes h3 - div Paar in einen Container packt (div oder li) und diesem dann ein padding-bottom gibt.

Ansonsten weiß ich nicht was du erreichen willst, bzw., was es in deinem Linkbesipiel anderes an Animationen gibt.

Lies dich doch mal ein wenig ein in jQuery, da git es 'zig Blogs und Tutorials mit guten Ideen.
Ich persönlich meine allerdings, daß gerade für eine F & Q -Seite ein simples weich slidendes Accordeon perfekt ist.

Gruß,
noRiddle

P.S.
Ich weiß, es heißt entweder Akkordeon (deutsch) oder accordion (engl.) und ich schreibe immer denglish accordeon ...