klappt alles prima, vielen Dank.

Eine Frage noch: WIE kann ich mit einem internen Link (id=ziel-1) direkt auf einen Inhalt des Accordeons zugreifen?

Ein Link steht also außerhalb des Accordeons und per click soll sich zum Beispiel das 2. Element öffnen

Vielen Dank für Deine Bemühungen.

sag mal, ich möchte das Accordion von jQuery UI selbst nutzen (siehe link unten), sprich als Extension für mein Programm Wysiwyg Webbuilder. So weit auch ganz gut, über den jQuery Webbuilder habe ich das Theme auch angepasst, nur leider funktioniert es nicht so wie es soll, besser gesagt wie ich es bei dir gesehen habe. Der Inhalt ist verschieden lang und deine Container passen sich jeweils an, bei der Extension allerdings wird ein Scrollbalken erzeugt, keine Anpassung an den Inhalt. Hast du da einen Expertentip für mich?

LG
Ricardas

http://jqueryui.com/themeroller/#!zThemeParams=5d000001001506000000000000003d8888d844329a8dfe02723de3e570162cf18d27450c454aa2f2e374d1d127fabb9ebc66c3ee5a70fb154870371702db6720bcd83f0ecbb2131337f10a086e219c538a2003e4a05b37f637b91dbf9e5ea1a30eee0ffb74635c67587b16e39b844855d43f178d7223e5844a27feed562a919e51a896a2b947ea0fe5769740cad2f353f43f6a6badb4f9f158f439cd0ec77f1c39bf311c9c328e70d7c078862964f803cfeb841e8f7d5c944dbec24d93e6f8096a02b769b976b7c435f6ee6b8cc66444023920a41270f305b7e9d576789ae017b7f8a16eaf3fddede704785a409c4fbbbe7481fb749e2ae44e8ec018139c9bdaad1ff148a94614b8bed98e577f2a12f376997fd9e196c9c2c4e8ade8e18f17a54d27413cfc22eb103a061cb0ace641d769abc84778c949297f6f00a2f8f502cbad9d937aace60187dbe5719bd8904bf7ad27999098ff61920ef5fc2ce8fc28088bfe4f049af0fad1091984f7cc7c512a75c11b0d0a81a1fd4a9aee0b0ef437e5370a72a1568ba3e12b2912e0c16c95f0a7db121b89833319b9b3d4d8508bce99ed91cf922da9c78511a24190d7a54d45882fc347df992d44a5223515862e741257e6920e3b32e5fe9c19f11f086f26e66f1e9ec94da3cb5f2dcc8be91cb5dc08236c670e97128b7e9dcf8dafebcda7ac193a3251395116da73002ca7756c07fbe44bbe5ebf232ca9146b55f92ec226878e01a55ccffba986c3

Vielen Dank und Grüße
Paul

danke für den Artikel. Ließ sich sofort einsetzen und sieht schick aus.

In dem Hinweis unter “Styling per CSS” hast Du noch einen Typo:
statt ‘toggle_container’ steht da ‘trigger_container’.

Gruß,
André

Tolles Teil hier super lieben dank dafür. Aber ich hab ein Problem. Auch ich wollte den ersten Task offen haben, habe nach deiner Anleitung in den Kommentaren somit meine erste Box mit Accordion Box 3 begonnen, dann habe ich noch den Code im Sqript eigesetzt ABER … nun ist zar die erste box offen, sobald ich aber eine andere anklicke kann ich die 1. Box nicht mehr öffnen. Weißt du woran das liegt?

Ich nutze es um ein Formular ein bzw. auszublenden. Hängt es vieleicht mit dem FORM Tag zusammen, das die Animation nicht flüssig ist? Das übergeordnete DIV und die FORM haben eine feste Breite und Höhe.

Beim slideup endet die Animation sehr abrupt.

die Schnipsel funktionieren wunderbar..! Danke schon mal dafür!
Nun hab ich in einem toggle_container eine Google Maps Karte per Iframe eingebunden (per API hab ich´s auch schon probiert)..
wenn ich jetzt nach Laden der Seite den Container öffne (aktiviere), dann seh ich zwar die Karte.. aber nicht an der richtigen Position.

Kann man das lösen?
Oder alternativ als Workaraound den iframe beim aktivieren neuladen lassen?

ich habe das Script in meiner Navi eingesetzt, wie es oben beschrieben ist. So weit klappt auch alles wie gewünscht, beim Klicken geht das Untermenü auf. Das Layout ist auch so wie gewünscht. Also vielen Dank für das Tutorial.

Nun zu meiner Frage. Es soll immer dann ein spezielles Bild angezeigt werden, wenn sich ein Untermenü unter dem Oberbegriff befindet. Da nicht bei jedem Oberbegriff ein Untermenü vorhanden ist, kann ich das nicht pauschal mit in der Klasse angeben, sondern muss irgendwie erkennen, dass nach der Klasse trigger noch eine Klasse toggle_container kommt.
Kannst du mir da eine kleine Hilfe geben, wie ich das erkennen kann?

Gruß,
Florian Weber

auch ich finde Dein Accordian-Skript super klasse. Ich bin begeistert, wie einfach es einzubauen und auch anzupassen ist. Mein Frage ist folgende: Kann man das Skript so verändern, dass sich der erste Text automatisch beim Öffnen der Website (per Link) als Accordeon langsam öffnet und nicht erst nach erneutem klicken auf den Header. hast Du da eine Lösung für mich?

Gruß Michael

Tolles und einfaches Skript! Ich habe das Problem, dass ich relativ lange Inhalte habe, wenn man dann runterscollt um das ganze zu lesen und dann auf den nächsten Header klickt, landet man irgendwo (weils oben schliesst und unten öffnet). Ich möchte aber dass der Header des neu geöffneten am oberen Rand des Browsers ist.
Eine Idee wie ich das umsetzen könnte?

Liebe Grüsse, Lukas

Grüße Sven

super Tutorial, super Script – weils einfach ist und einfach funktioniert – ohne erst die jQuery-UI zu bemühen.
Und vielen Dank für die Freigabe – habe das Script gerade für ein aktuelles Projekt verwendet.

Wenn man mit flexiblen Höhen und breiten arbeiten möchte kann man folgendes Script nutzen um den Boxen eine Breite zu geben, und somit das unschöne “flackern” verhindern.

1
2
3

$('.toggle_container').each(function() {
		$(this).width($(this).innerWidth()).hide();
});

einfach damit diese Zeile ersetzen:

1

$('.trigger').not('.trigger_active').next('.toggle_container').hide();

Dann müsste es klappen. Habe mein Script etwas anders aufgebaut, aber iich denke das sollte passen.

VG

Ich habe das gleiche Problem wie Jennifer.

Ich habe dem ersten Container in der Überschrift “trigger_active” in der class hinzugefügt, wie du es weiter oben (klick) gesagt hast.

Es liegt meines Erachtens an dem style “display”, der durch das Script dem anzuzeigenden Container verleiht. Angezeigt: “display:block”, Nicht angezeigt “display:none”. Leider konnte ich die Eigenschaft nicht korrigieren, da diese stets vom Script überschrieben wird.

Ich brauche es so, dass beim 1. Seitenaufruf der 1. Container geöffnet ist und dass durch klicken von “weiter” der zweite Container geöffnet wird und dabei der erste wieder geschlossen wird. Das kann ich durch POST-Varaiblen lösen, doch eben nur, wenn ich weiß, wie ich das Script anpassen muss, damit der von mir gewünschte Container beim Seitenaufruf geöffnet ist.

Sonst nen klasse Script inkl. Beschreibung *THUMBS UP*

Chris

ich habe ein Problem was bereits weiter oben bereits genannt worden ist.
Der Text fährt aus und dann sofort wieder zu so, dass man nicht die chance hat diesen komplett zu lesen. Ich verstehe nicht ganz was ich ändern kann damit die Animation quasi am Ende stehen bleibt.

Danke schon mal für deine Hilfe und viele Grüße

Danke!

Nur ein Problem hat das ganze…undzwar die feste Höhe…wenn ich eine feste Höhe benenne, dann ist es ein harmonischer Ablauf…sobald ich die Höhe automatisch bemessen lasse hackt es ab..es läuft an, aber hackt am schluss ab…
Problem ist…für jede Box dieselbe Höhe angeben ist doch nicht sinngemäß..nicht jede Box enthält den gleichen Inhalt…und für jede Box ne eigene ID und ins script einbinden ist sehr umständlich…

Ich habe einiges probiert, komme aber nicht auf die Lösung..warum hackt es bei ner automatischen Höhe??

Freundliche Grüsse,
Phil

danke für die promte Antwort! Ich habe zu der “trigger_active”-Klasse noch eine “trigger”-Klasse hinzugefügt. Nun sieht es zu Anfang zwar korrekt aus, ist aber nicht klickbar und verfällt wenn man eine andere Rubrik öffnen möchte
Vielleicht hast du eine Idee?

Liebe Grüsse,
Phil

schön dass dir der Artikel gefällt und dass du das Script benutzen willst. Ich hab mir die Seite mal angesehen, scheint alles ok zu sein, bis auf ein kleines Detail: Gib der ersten Überschrift die Klasse “trigger”, also zusätzlich zu der “trigger_active”-Klasse, dann sollte es funktionieren. Wenn nicht, kannste dich ja nochmal melden.

Grüße

Erst mal Gratulation zu Deinem Blog, finde ich sehr gelungen

Das Skript ist absolute Klasse und passt super als Ergänzung auf Seiten mit sehr viel Content!

Allerdings habe ich ein kleines Problem damit die erste Container Box geöffnet darzustellen. Ich weiss dass die Frage bereits gestellt wurde, aber irgendwie funktioniert das bei mir nicht so ganz. (vielleicht ein doofer Fehler beim Markup oder im JS?)

Ich arbeite gerade an einem Redesign und habe auch eine Demoseite hochgeladen: http://www.kipperdesign.ch/sct_redesign/

Leider ist mein Wissen über Javascript noch im Anfängerstadium und ich wollte fragen ob es eventuell möglich wäre mir in dem Fall zu helfen? Würde mich sehr freuen.

Freundliche Grüsse,

Phil

echt ein super Tutorial.
Doch ich hätte eine Frag. Gibt es eine möglich, dass wenn der Benutzer sein Javascript deaktiviert hat, dass alle “toggle_container” geöffnet sind?
Damit auch dieser nutzer die Chance hat die Inhalt zu sehen

Vielen Dank schonmal im Vorraus

Constantin

folgende Situation:

Der User besucht die Seite, der erste Container ist geöffnet, die anderen geschlossen. Er klickt auf den zweiten Link, der erste Container schließt sich, der zweite öffnet sich. Soweit ok. Dann jedoch klickt der User wieder auf den zweiten Link, dieser schließt sich und nun ist garnichts mehr geöffnet.
Das möchte ich vermeiden indem wieder der erste Container geöffnet wird.

Ist das möglich?

Gruß,

Franzi

Bis es soweit ist, kannst du ja mal nach horizontal jQuery accordion suchen, da findet man ein paar ganz gute Artikel zum Thema. Das sind allerdings meistens Plugins und deswegen etwas umfangreicher. Ich hoffe trotzdem, dass dir das weiterhilft.

Vielen Dank für den Tipp!

LG M.

kannst Du mir erklären, wie man einen bestimmten Container über einen link oder textanker öffnen kann? Gibt es eine Funktion wie: $(‘.selector’).accordion({ navigation: true });

Gruß, Carsten.

P.S. Schönes Blogdesign und klasse Infos. Macht Spaß hier zu lesen