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.

83 Comments on “Simple jQuery Accordion”

Trackback URLRSS Comments

  1. michal says: 28.11.2020

    finally i found the best peer to peer lending service provider in UK i am very happy anyone need this service visit this website i am very happy after getting service.


  2. james says: 15.10.2020

    nice post i really liked it.. this is very informative article.


  3. annonces rencontres marseille says: 11.10.2020

    Je suis fou amoureux ɗ’une meuf Ԁe deᥙx ans
    mon aînée.


  4. VoIP says: 15.08.2020

    That’s cool that you could get your voicemail through an email. That seems like it would be pretty convenient if you are out of the office and someone needs to reach you. That sounds like something that would be worth investing in if I decide to start a business.


  5. ifisa says: 11.08.2020

    i need professional suggestion who provide all information about ifisa.


  6. tumblr says: 04.08.2020

    i am writer and writes many topic about business finance read more click here


  7. ifisa says: 25.07.2020

    jquery is very interesting language one of my friend he is working on jquery this time he was make a business website.


  8. Isfia says: 25.07.2020

    jquery is very interesting language one of my friend he is working on jquery this time he was make a business website with the help of this language.


  9. uk VoIP Provider says: 24.07.2020

    Before telling you the most important topic that is under consideration nowadays I just want to mention to you that this blog is remarkable to describe the various aspects of electric skateboards. Thank you for sharing your views.


  10. website says: 09.07.2020

    I have read so many articles or reviews on the topic of the blogger lovers except this
    post is truly a good post, keep it up.


  11. james says: 27.06.2020

    nice post i really liked it.. this is very informative article.
    It’s very informative and you are obviously very knowledgeable in this area.I personally like your post; you have shared good insights and experiences.


  12. varun says: 27.06.2020

    Really like your web sites details! Undoubtedly a wonderful provide of knowledge that’s extremely helpful. Stick with it to carry publishing and i’m gonna proceed studying by way of! Cheers.


  13. light says: 18.05.2020

    My relatives all the time say that I am killing my time here at web, except I
    know I am getting familiarity everyday by reading such pleasant content.


  14. light says: 18.05.2020

    If some one wishes expert view on the topic of blogging
    and site-building then i suggest him/her to pay a visit this web
    site, Keep up the nice job.


  15. light says: 18.05.2020

    I used to be recommended this website via my cousin. I’m no
    longer sure whether this post is written by way of him as no one else
    recognize such precise about my trouble. You’re incredible!
    Thank you!


  16. light says: 18.05.2020

    I am actually happy to glance at this webpage posts which consists of plenty of useful information, thanks for providing these information.


  17. light says: 18.05.2020

    I do not even understand how I stopped up here, but I thought this publish was great.
    I don’t recognize who you are but certainly you are going to a
    famous blogger should you are not already. Cheers!


  18. light says: 18.05.2020

    Awesome blog! Do you have any suggestions for aspiring writers?

    I’m planning to start my own site soon but I’m a little lost on everything.
    Would you suggest starting with a free platform like WordPress or go for a paid
    option? There are so many choices out there that I’m totally
    overwhelmed .. Any tips? Thanks!


  19. light says: 18.05.2020

    What i do not understood is in fact how you’re not really a lot more neatly-appreciated than you may be
    now. You are very intelligent. You recognize therefore considerably relating to this
    topic, produced me for my part imagine it from a lot of varied angles.
    Its like women and men are not fascinated except it’s one thing to do with Lady gaga!
    Your individual stuffs nice. At all times handle it up!


  20. light says: 18.05.2020

    It’s genuinely very complex in this busy life to listen news on TV, thus I just use web for that
    purpose, and take the most recent news.


  21. Hair design in San Bernardino says: 27.02.2020

    certainly like your web-site but you need to check the spelling
    on several of your posts. Many of them are rife with spelling issues and I in finding it
    very troublesome to tell the truth nevertheless I will definitely come back again.


  22. Buy flats in Hubli says: 25.02.2020

    I think that is one of the such a lot important information for me.

    And i’m happy studying your article. But want to remark on few basic issues, The
    web site taste is ideal, the articles is actually nice :
    D. Just right process, cheers


  23. Physicians in Hempstead NY says: 23.02.2020

    This is the right blog for anybody who would
    like to find out about this topic. You understand a whole lot its
    almost hard to argue with you (not that I really will
    need to…HaHa). You definitely put a fresh spin on a topic that’s
    been discussed for a long time. Excellent stuff, just wonderful!


  24. כיסא זול באלי אקספרס says: 15.02.2020

    Hey There. I found your blog the usage of msn. This is a really smartly written article.

    I will make sure to bookmark it and come back to learn extra of your
    helpful information. Thank you for the post. I will certainly comeback.


  25. keto meals says: 15.02.2020

    Right away I am going to do my breakfast, later than having my breakfast coming over again to read additional


  26. guest blogging website says: 06.02.2020

    Hi there, after reading this awesome article i am also cheerful to share my experience here with friends.


  27. mia khalifa body size says: 06.02.2020

    mia khalifa body size…

    blog topic…


  28. Schlafzimmerleuchten says: 25.10.2019


    Simple jQuery Accordion – Norman's Blog – Demos…


  29. nembutal says: 08.09.2019


    Simple jQuery Accordion – Norman's Blog – Demos…


  30. maquiagem para casamento a noite como fazer says: 19.05.2019

    Batom escuro = olhos esfumados (levemente marcados).


  31. sewa mobil palembang says: 14.05.2019

    I have recently started a website, the info you offer on this site has helped me tremendously. Thanks for all of your time & work. “Cultivation to the mind is as necessary as food to the body.” by Marcus Tullius Cicero.


  32. pulseira pandora couro Verde says: 04.04.2019

    whoah this weblog is fantastic i love studying your
    posts. Keep up the good work! You realize, a lot of individuals are searching around
    for this info, you can aid them greatly.


  33. biz rich world revolution says: 26.03.2019

    What’s up, I wish for to subscribe for this website
    to obtain most up-to-date updates, so where can i do it please help


  34. queima de 48 horas says: 03.02.2019

    Vinícius Possebon é fundador do Q48 horas.


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


  36. Mary says: 11.10.2018

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


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


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


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


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


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


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


  43. 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!


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


  45. kapsul jamu pelangsing says: 19.11.2015

    Weight Loss Herbal Tea – for Weight Loss – Healthmeup.


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


  47. sreelal says: 03.09.2014

    Hi Norman,
    This Accordion is good and usefull …


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


  49. 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:

    Weiter so!


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


  51. 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!!


    • 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:
      werd ich wohl dieses we noch veröffentlichen :)


  52. Monika says: 07.06.2012

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


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


  54. Holger says: 14.02.2012

    Danke für die Anleitung.
    Es funktioniert prima!


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

    Ein User der Hilfe braucht


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


    • Fidelia says: 09.08.2016

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


    • 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


    • http://www./ says: 01.03.2017

      That’s way the bestest answer so far!


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


  56. 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 im Zusammenhang mit dem funktionieren, ich würde vorschlagen, du probierst es mal aus und lässt uns wissen, obs funktioniert hat :)


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


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


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


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


    Hast Du da einen Vorschlag


  61. 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:

    Im ersten Container style=”display: block” geschrieben.
    Ergebnis: es passiert nichts.

    Im Script zwei Zeilen ergänzt und im ersten Container die entsprechende id

    Im Script zwei Zeilen ergänzt und im ersten Container die entsprechende class

    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


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


  62. Ingo says: 19.12.2010

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


  63. therealAnodyne says: 03.12.2010

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


    Vor allem in Box 2 …


  64. Onas says: 16.11.2010

    Hey Norman,

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


  65. therealAnodyne says: 25.09.2010

    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,


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


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


Welcome !


Write a reply to james’s comment

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