Accordion Box 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Accordion Box 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Accordion Box 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Accordion Box 4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
andreas says: 12.07.2010
meine accordion balken springen immer. am anfang läufts flüssig und dann auf dem letzten stück springt es ruckartig zum endpunkt.
Norman says: 26.07.2010
Hallo Andreas,
ja das kenn ich, bei mir trat das Problem im Zusammenhang mit margin auf. margin zählt nicht mit zur Höhe eines Divs, vermutlich springt es deswegen am Ende.. versuch, wo du kannst, auf margin zu verzichten und stattdessen padding zu benutzen.. oder kopiere dir erstmal mein CSS und versuche es dann anzupassen.
Mark says: 23.09.2010
Hi, also ich finde dein Accordion sehr gut. Nachdem das von JQuery UI bei mir einfach nicht funktionieren wollte, warum auch immer … würde ich gerne jetzt den von dir benutzen. Aber dieses springen am Ende der Animation ist wirklich nicht so toll.
Wo muss man denn auf margin verzichten? In deinem CSS gibt es nur eine margin Eigenschaft, wenn ich die durch padding ersetze springt es immer noch.
In meinem style.css für die Webseite sind natürlich viele margin Eigenschaften, kann die auch nicht entfernen.
Norman says: 24.09.2010
Also die Überschriften haben bei mir nur nach unten hin etwas margin, die Container haben rundum etwas padding aber kein margin. Ansonsten wüsste ich nicht, was den Fehler noch verursacht.. kannst du mir eventuell dein Beispiel zeigen, damit ich den Fehler besser untersuchen kann?
therealAnodyne says: 25.09.2010
Hallo.
Das Springen wird um so doller um so mehr padding man oben und / oder unten angegeben hat. Da bei dem Effekt die Höhe des Containers animiert wird, wirkt sich dies, da jquery das padding erst am Schluß der Animation addiert, negativ aus (eigentlich ein Bug).
Man kann das beheben, indem man dem animierten Container
1. eine feste Breite verpasst und
2. weder padding noch margin
Um das gewünschte padding zu erhalten creiert man einen zweiten Container in dem ersten, welchem dann das padding zugewiesen wird.
Da du in deinem Beispiel im animierten Container noch einen p-tag hast, kannst du diesem ja das padding verpassen. Der .toggle-container braucht dann nur noch eine Breite.
Hoffe das hat geholfen,
cheers,
therealAnodyne
Norman says: 16.11.2010
Also mit der festen Breite hast du Recht! Wenn die Container einen vorgeschriebene Breite haben, ruckelt nichts mehr. Mit dem Padding allerdings bin ich mir nich so sicher.. ich geh davon aus, dass jQuery einfach outerwidth() und outerheight() benutzt, da ist das Padding schon mit eingerechnet.
Komisch nur, dass es in der Demo oben auch so geht??
[Allgemein] Ein/Ausklappen says: 11.10.2010
[...] [...]
Onas says: 16.11.2010
Hey Norman,
danke für diesen Beitrag. Habe schon lange eine ein/ausklappmethode gesucht.
therealAnodyne says: 03.12.2010
@Norman
Nö, geht nicht in Firefox und nicht in Chrome (Iron), andere Browser habe ich gerade keine Zeit zu testen.
Will sagen kurz bevor ein Container völlig geöffnet ist, springt er.
Schau noch’mal genau
therealAnodyne
Nachtrag:
Vor allem in Box 2 …
Norman says: 03.12.2010
so habs jetzt angepasst, zufrieden?
therealAnodyne says: 16.01.2011
Jetzt erst gesehen, klar, geht doch
Viel Erfolg weiterhin,
therealAnodyne
Ingo says: 19.12.2010
Hi
Das is genau das was ich suche. Nur habe ich 0,0% Ahnung.
Ich habe auf meiner Website einige Seiten welchen einen extrem langen Text enthalten. Diese langen Texte haben aber Abschnitte und die würde ich gerne so zum auf / zuklappen machen.
Sprich: Ich geh im Adminbereich auf Seiten, erstelle eine und dort wo man über den TinyMCE den Inhalt der Seite eingibt, da möchte ich sowas haben. Das Teile des Inhaltes klappbar sind.
Wie kann ich sowas realisieren?
Norman says: 25.12.2010
Hallo Ingo,
das in den Comments zu klären ist wenig sinnvoll.. da du “0,0% Ahnung” hast, wird es generell schwierig werden. Wenn sich für deine Seite kein WordPress Theme finden lässt, solltest du eventuell überlegen, ob es nicht mehr Sinn macht jemanden dafür zu bezahlen.
majesco says: 23.12.2010
Hallo zusammen,
ich setze das Script auf einer Kundenseite ein und möchte nun den ersten Container beim Aufruf der Seite aufgeklappt haben.
Dazu habe ich folgendes probiert:
1.
Im ersten Container style=”display: block” geschrieben.
Ergebnis: es passiert nichts.
2.
Im Script zwei Zeilen ergänzt und im ersten Container die entsprechende id
$(‘.toggle_container’).hide();
$(‘#firstslider’).slideToggle(‘slow’);
$(‘#firstslider’).addClass(‘trigger_active’);
3.
Im Script zwei Zeilen ergänzt und im ersten Container die entsprechende class
$(‘.toggle_container’).hide();
$(‘.firstslider’).slideToggle(‘slow’);
$(‘.firstslider’).addClass(‘trigger_active’);
Bei 2. und 3. ist der erste Container zwar aufegklappt, verhält sich dann aber unabhängig von den andern. D.h. eine Klick auf die nächste Headline, fährt den entsprechenden Container aus, aber nicht den ersten ein.
Wie kriege ich das hn?
Viele Grüße
majesco
Norman says: 25.12.2010
Hi majesco,
ich bin mir ziemlich sicher, dass diese Frage schon einmal im dazugehörigen Artikel in meinem Blog gestellt wurde. Schau da einfach nochmal nach
Jan says: 04.07.2011
Hallo Norman,
danke für dieses Superscript!
Habe nun aber folgendes Problem:
In meinem Fall habe ich in einer Tabelle den trigger und der toggle_container liegt ein paar Elemente weiter:
text 1
text 2
Versteckter Inhalt
etc…
Hast Du da einen Vorschlag
Jan says: 04.07.2011
Oh, sorry das ganze sollte eigentlich eine Tabelle werden…
Also “text 1″ ist ein td, welches den trigger enthält und “versteckter Inhalt” liegt in einem div in einer td der nächsten Zeile, der eingeblendet werden soll.
Das Ganze wiederholt sich dutzende Male.
Sebastian says: 05.07.2011
Ich würde an deiner Stelle noch ein “.stop(false,true)” hinzufügen, da die Animation mit mehrmaligem Klicken einen loop hat
Sieht schöner aus, wenn es nicht als hin und her springt
Tom says: 09.01.2012
Ist es eigentlich möglich innerhalt eines Accordions zu verweisen? z.B ich hab im ersten Accordion einen link der auf das dritte accordion verweist. Bei einem klick darauf soll sie dann das dritte accordion öffnen.
griß tom
Norman says: 09.01.2012
hallo Tom,
das hier ist ein eher simples Accordion, dass solche Funktionen nicht beherrscht. Ich bin mir aber ziemlich sicher, dass das möglich ist, was du beschreibst. z.B könnte das http://jqueryui.com/demos/accordion/#default im Zusammenhang mit dem http://www.jessenicola.com/blog/jquery-accordion-open-outside-link funktionieren, ich würde vorschlagen, du probierst es mal aus und lässt uns wissen, obs funktioniert hat
James says: 06.02.2012
Sorry, ich habe den kompletten Code übernommen, wie er geschrieben ist.
Doch er springt immer noch.
Der Code stimmt nicht.
Was mache ich falsch?
Habe es im Dreamweaver tausend mal ausprobiert.
Habe versucht padding zu verringern, margin rauszunehmen, aber es ändert sich nix.
Ob ich deinen “OrginalCode” nehme oder deinen abändere, es zeigen sich keine unterschiede.
Über Hilfe würde ich mich sehr freuen
LG
Ein User der Hilfe braucht