css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
user profile image

Read the copy in the accordion sections for some info about how this was made.


  1. There's a nice rhythm to the transitions! Good work. :)

  2. Looks great!

  3. Alex, you have great pens, I'm following you now :D

    Nice work on this pen, I like the effect used in the <i> element

  4. Really like this! I want to look at building something like this, but it's great code and design!

  5. Looks Nice :) But sorry to say it will not work in following case : 1. If there is any anchor tag in description You cant click on that :( 2. If there is any Select, checkbox and radio button in description You cant click on that as well :(

  6. Good point @mukesh_rana, I've updated the demo to have only the <h2> elements covered by the checkbox. The </h2><p> elements now have a higher z-index. If you were to give the checkboxes that you want to use to toggle the accordion panels their own class and apply the functionality of the current input[type=checkbox], that should solve the second issue.

  7. One other fix I'd suggest: add a :focus effect so that keyboard users can tell that there's a possibility for interaction. (And can tell which heading has their focus!)

  8. Hi Alex, I really like this...thanks! I'm having trouble making the up arrow/down arrow transition display. I'm not sure what's preventing its display on this page: . Do you have any ideas?

  9. @drewl It looks like the transforms aren't being prefixed (which will still cause issues in chrome I believe ) but more importantly there doesn't appear to be a # in front of hex code you used for the background on the :before & :after pseudo elements, making that property ignored ( change background-color: ff6873 to background-color: #ff6873. Hope that helps!

  10. @abergin - thanks very much! Works well now.

  11. The most though out and easy to use accordion code I have seen. Nice work!

  12. Hi @abergin !

    Thanks so much for sharing this, it has helped me a lot!

    Would you mind if I ask you: is there a way to close the active/open tab just by clicking any of the other tabs instead of by clicking the active/open tab again? I have no idea how to do it with CSS, and I'm trying to avoid JavaScript -for weird client issues...-. Any ideas? Is it possible?

    Thanks again!

  13. Hey @rq ! Glad this demo could help. I've forked it and replaced the checkboxes with radio buttons, so only one can be checked at any time. The only problem with this approach is that once one section is opened, the accordion can't be fully closed again. Hope this helps!

  14. Hi @abergin !

    Thanks so much for the quick reply and for offering a new approach! Hope I can return the favour in the future (:


  15. I'm using a modified version of your accordion, which is rather clever. But the accordion does not expand at all in Android Browser or Amazon Silk (together these are easily 3% of our site's total traffic). Do you have any ideas or suggestions to fix this?


  16. Hi there I absolutely love this accordion. I am just having trouble adding content other that text to text area. For instance I would like to add a table or other h elements in the content of the accordion. How will this be accomplished?

    Thank you so much.

  17. Hi there I found another example of html and css accordion. But this one was built with divs so I could add other content either than text. As i am still quite new at this. I have pasted the code here: http://codepen.io/edcotty/pen/RPWEmN

    Please feel free to make recommendations for changes and fixes. Thank you.

  18. Hey @abergin -

    Love this accordion! I am having trouble getting the arrows to show up on IE9. Any suggestions on how to make it work?


  19. Love this. I've looked at a lot of other samples and yours if by far the most visually appealing. i do have a few questions:

    -How is the "arrow" generated? I don't see a ">" or other ascii reference to say to display the symbol there. -What would need to be done to make this work multi-dimensionally? i'm trying to solve for something like this:

    RENTAL GEAR: Camping> Stoves > Backpacking Stove (item 1) Stove Description, picture, cost, .... Wood Stove (Item 2) Stove Description, picture, cost, .... Tents > 2 Person Tent (item 1) Tent Description, picture, cost, .... 4 Person Tent (item 2) Stove Description, picture, cost, .... Kayaking > Single kayak > Kayak Description, picture, cost, .... Tandam kayak > Kayak Description, picture, cost, .... Fat Bikes >

    Thanks for any help you can provide.

  20. Well....that didn't translate well. Basically, i'm trying to modify your code to that you can have a high level menu (Camping, Kayaking, Fat Biking, Snowshoeing, ..) and then under each of those have other menus that will then accordion to show the items under that submenu. For example, under Camping you may two submenus (Stoves, Tents). Then under each of those you have a listing of individual items that are categorized under each one. In addition, it would be great to be able to put the individual items under the main menu item or under the submenu item (in your example the


  21. First, thank you for this example!

    I forked this into a higher-level simplified SCSS version. which I was able to use with complex CMS markup: https://codepen.io/bdanin/pen/XRedMr

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.