November 1, 2016 7:49 am

Create pure CSS based toggle visibility button

I fount that simple snippet on codepen and it looks super easy and simple so no need of JavaScript to hide and show objects if we have a super easy and fast CSS method to do that. Its a very simple and easy snippet.

Create pure CSS based toggle visibility button

Here is the HTML for design

Above HTML show a form and a button to view a form.

This is the CSS used to hide and show form

Included bootstrap library for form design and below css will do the magic.

Hide these classes on runtime .helper-trigger, .helper-show and Hide and show them on checked event.

That’s it I hope you like it please comment your feedback.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:
  • Lorelle

    Seems more complicated than a perfectly simple and understandable javascript solution.

  • Nice functional solution where javascript might not be usable! Thanks for sharing this.

  • Finally I have inserted your code in my website.