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
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Pure CSS Slide Down Toggle


  1. in the .message div i added another checkbox and in the body another .div with class magenta when i open message div it has the #suit checkbox i've put the #suit:checked ~.magenta{display:block}; and nothing happens.any suggestion?thank you.

  2. @juriolov can you show me your fiddle?

  3. What if I have multiple "messages" that I want multiple toggle buttons to link to?

    Would you use radio buttons, and what would the code look like?

  4. This is so good but it just work when .message has a fix height which is something very important to say, in cases where content is dynamic you will have to do a bit more of work :)

  5. DearSir, I 've found the demo "Pure CSS3 Slide Down Toggle Demo" is very useful. It just I would like to know how to change the "open button" to a pure image, as my wish is to use a image to open the upper panel. Sorry I am just a designer and not programmer, I have tried but none of my script work in my case. Looking forward to your reply, thank you so much ! :)

  6. @rixto Either, you can make the checkbox transparent and put an image inside it or, you should use a jquery solution.

  7. Hello thank you for your reply. It's not that simple actually. Can you working with us as freelance job we can pay to that. I hope to send you the website link so you can understand our needs. Thank you ! Looking forward to your reply

  8. @surjithctly hi here? We really hope you can help and we can pay for the script. We need CSS only because we already have too much jquery inside. Please kindly reply. Thank you.

  9. I just want to ask how the label is sliding down with the message div isn't it supposed to stick to the top??

    thank you

  10. After looking at your pen, I used the concept in a project at work and we're really happy with it. Thank you for sharing this!

  11. @justinforce Glad I could help :)

  12. Does anyone know how I could center the toggle label button horizontally? I feel like I've tried everything :)

  13. Its cool Surjit, but when i put in

    in bootstrap page then it stop working, my purpose it to place it where i want in page.
  14. Hey! Nice code! A quick question, how can I wrap the input on a div? If I add it on a div the toggle doesn't work anymore.


  15. I've taken your pen and modified it to make a slide-down hamburger menu. But it's not working correctly. Items in the slide-down menu are not clickable. I would greatly appreciate any suggestions as to how to fix this problem.

    Here's the link to the pen: http://codepen.io/martincol/pen/ZePKab

    Thank you

  16. Hi, like @tpicks I want to use your solution but for multiple times in the same page, is it possible? Do I need to duplicate the CSS #IDs definition for each like #toggle #toggle2, #toggle3, ... ?

  17. @Meloman-zz I have not tried that personally, But Yes. It should work fine.

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

You must be logged in to comment.