Demos » Simple jQuery Accordion

Share / Comment

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.

50 Comments on “Simple jQuery Accordion”

Trackback URLRSS Comments

  1. queima de 48 horas says: 03.02.2019

    Vinícius Possebon é fundador do Q48 horas.

    Reply

  2. plano detox says: 09.12.2018

    Aw, this was an incredibly good post. Taking the time and
    actual effort to generate a really good article… but what can I say… I hesitate a whole lot and don’t seem to get anything done.

    Reply

  3. Mary says: 11.10.2018

    Hello mates, its impressive post concerning teachingand fully defined, keep it up all the time.

    Reply

  4. kobani says: 21.07.2018

    I have been exploring for a bit for any high-quality articles or weblog posts
    on this sort of area . Exploring in Yahoo I finally stumbled upon this site.
    Reading this info So i am happy to express that I have an incredibly good
    uncanny feeling I came upon exactly what I needed.
    I such a lot without a doubt will make certain to do not put out of your mind this website
    and provides it a glance on a constant basis.

    Reply

  5. https://sieuthinhadathanoi.info/ says: 23.12.2017

    Many of these the situation is fairly easy and a lot self respecting men available are
    not shy to tackle a diy project, provided that it is of their comfortable zone or
    at best inside their level of ability, no sense in embarrassing yourself
    and upsetting your wife all in the same day. Concrete driveways will also be good insulators, so heat energy is
    a lot more easily stored into concrete. Adding design could be quickly completed with paint jobs and permits you to custom decorate any room.

    Reply

  6. https://tintucbatdongsan24h.info says: 23.12.2017

    The convenience and savings abound for travelers wanting to
    get the best of all possible worlds when scouting for a location to stay.
    When most people have to visit the first place they think about when it comes to getting an area
    to stay at is often a hotel rather than a service apartment that is certainly mostly because they are
    not really alert to what a service apartment is.
    If you want a location less populated, where you are better the numerous
    recreational use spots, you could possibly select the suburbs.

    Reply

  7. https://sieuthichungcumoi24h.info/ says: 06.12.2017

    Most boundary disputes should be handled privately and reach
    a contract both sides are satisfied with. Ademption defined
    - Ademption occurs when the house the Will leaves to someone is not inside
    decedent’s estate in the event the decedent dies. Hope it helps you and you are able to avoid any type of future
    problems.

    Reply

  8. Criar Loja virtual hinode says: 31.07.2017

    I’m impressed, I must say. Seldom do I come across a blog
    that’s equally educative and engaging, and let me tell you, you have hit the
    nail on the head. The issue is an issue that too few people are
    speaking intelligently about. I’m very happy that I found this during my
    search for something relating to this.

    Reply

  9. Society For Acupuncture Research - Home says: 02.09.2016

    Relieves discomfort and improves function for some folks
    with osteoarthritis of the knee and complements common health-related care.

    Reply

  10. cellfoods.net says: 06.04.2016

    Everything is very open with a clear explanation of the challenges.
    It was really informative. Your site is useful.
    Thanks for sharing!

    Reply

  11. Candy says: 04.12.2015

    What’s Taking place i am new to this, I stumbled upon this I’ve found It absolutely helpful and it has
    aided me out loads. I am hoping to give a contribution &
    aid other users like its helped me. Great job.

    Reply

  12. kapsul jamu pelangsing says: 19.11.2015

    Weight Loss Herbal Tea – for Weight Loss – Healthmeup.

    Reply

  13. Agentur Webdesign says: 12.11.2015

    Schönen Effekt. Wir verwenden diese Funktion, wenn die Seite, die Sie brauchen, um eine Menge Text zu platzieren, aber das Design erlaubt es nicht schön zu machen

    Reply

  14. sreelal says: 03.09.2014

    Hi Norman,
    This Accordion is good and usefull …
    thaks..

    Reply

  15. Klaus says: 25.02.2014

    Hallo Norman,

    vielen Dank für die ausführliche Erklärung. Ist zwar schon ein älterer Artikel zum Accordion, aber ich konnte es heute sehr gut gebrauchen. Wirklich simpel und einfach zu implementieren.
    Sieht fantastisch aus und funktioniert mit der JQuery-Bilbliothek 1.11 sogar im IE ;-) .

    Reply

  16. Michael Bohn says: 02.11.2012

    Nochmal ich.
    Hab’s gerade herausgefunden wie es geht.
    War mal wieder einfacher wie gedacht.

    Übrigens ein super Feature.
    So simple und funktional, wie man sich’s wünscht.

    (Link zur Seite: http://www.playduply.de/c_create_own_duply.php)

    Weiter so!

    Reply

  17. Michael Bohn says: 02.11.2012

    Hallo Norman.
    Kann man das Ganze auch so beim Aufruf der Seite einrichten, dass keine Inhalte, sondern nur die Headlines zu sehen sind?
    Ich hab’s mit einigen Einstellungen probiert. Leider ohne Erfolg.

    Reply

  18. Volker says: 23.06.2012

    hmm, also ich lese jetzt seit über einer stunde alle mögelichen seiten über accordion und finde ums verrec… keine funktionierende möglichkeit auf ein beliebiges event (is ja egal was) alle segmente eines accordions zu schliesen.

    wenn ich $(‘#portfordion’).accordion(“activate” , 1 ); mache dann schliesst er mir das 2te element wenn dieses offen ist aber eben nicht wenn zufällig das dritte offen ist. -> hatte was gelesen mit $(‘#portfordion’).accordion(“activate” , -1 ); -> aber da passiert nix bei mir.

    müsste doch eigneich was ganz einfaches sein ?
    würde auch funzen wenn ich auslesen könnte welches segment meines accordions grad offen ist -> dann würds ja mit dem $(‘#portfordion’).accordion(“activate” , variabledesausgelesenenindex ); auch funzen -> aber auch eine solche einfache option hab ich nirgends gefunden.

    thx a lot!!

    Reply

    • Volker says: 23.06.2012

      hello :)
      also da ihr es hier über ruckler habt, ich hätte da auch einen kleinen winzigen an dem ich auch schon sehr lange sass und der aber auch nur unter safarie und chrome kommt. -> firefox ist bombenstabil

      is sonst ne schöne seite geworden -> falls jemand lust hat draufzukucken:
      http://andre-noll.de/preview/
      werd ich wohl dieses we noch veröffentlichen :)

      Reply

  19. Monika says: 07.06.2012

    @Norman,
    auch ich mag mich für dieses einfache und so verdammt gute Script bedanken => ich schätze daran, dass der Inhalt bei deaktiviertem JS einfach da ist

    und mag folgendes erzählen:

    es ruckelte beim Aufklappen ….

    bis ich nach gut 35Minuten erkannte => dieses Ruckeln ist der Scrollbalken der entsteht oder verschwindet, :-)

    frau sollte abends nichts mehr arbeiten, aber dies juckte mich einfach :-)

    Reply

  20. Christian says: 22.03.2012

    Toller Beitrag. Kann nicht schaden, sich mit dem Thema detailierter auseinander zusetzen. Werde bestimmt auch die weiteren Posts im Auge behalten.

    Reply

  21. Holger says: 14.02.2012

    Danke für die Anleitung.
    Es funktioniert prima!

    Reply

  22. 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

    Reply

    • Norman says: 09.02.2012

      Hallo James,
      wichtig ist, dass du den Containern eine feste Breite per CSS verpasst, steht auch weiter oben schonmal. Viel Glück!

      Reply

    • Fidelia says: 09.08.2016

      It’s great to read something that’s both enjoyable and provides prgaamtisdc solutions.

      Reply

    • http://gotourl.pw/icicibank.com says: 07.09.2016

      MONTILLA SE LLAMABA MACUTO CANTABA LOBA HERIDA SE RECUERDAN … Mas tu cariño no está junto a mí, de ti distante no puedo existir. Aullo en las noches, sin ti no hay vida y tú sin mi amor eres loba herida … JAJAJA AHI LA TIENEN

      Reply

    • http://www./ says: 01.03.2017

      That’s way the bestest answer so far!

      Reply

    • driving without a license plate says: 07.03.2017

      An interesting discussion will be couturier statement. I cerebrate that you need to write more on this content, it durability not be a preconception concept but mostly everyone is not sufficiency to be able to communicate in such subjects. To the succeeding. Cheers just like your Khmer Karaoke Stars.

      Reply

  23. 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 :)

    Reply

  24. 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

    Reply

  25. 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

    Reply

  26. 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.

    Reply

  27. 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

    Reply

  28. 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

    Reply

    • 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 :)

      Reply

  29. 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?

    Reply

    • 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. ;)

      Reply

  30. 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 …

    Reply

  31. Onas says: 16.11.2010

    Hey Norman,

    danke für diesen Beitrag. Habe schon lange eine ein/ausklappmethode gesucht.

    Reply

  32. 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

    Reply

    • 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??

      Reply

  33. 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.

    Reply

    • 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.

      Reply

      • 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.

        Reply

        • 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?

          Reply

Welcome !

Write a comment

« Back to Demos Found a mistake? Report it! by–sa 2019