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.

Comments

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.

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

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

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.

CodePen

We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen.