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.

<img class="aligncenter size-full wp-image-4796" src="http://i2.wp.com/images.phpgang.com/2016/11/Create-pure-CSS-based-toggle-visibility-button.png?resize=700%2C400" alt="Create pure CSS based toggle visibility button" srcset="http://i2.wp.com/images.phpgang.com/2016/11/Create-pure-CSS-based-toggle-visibility-button.png?w=700 700w, http://i2 prix cialis en pharmacie france.wp.com/images.phpgang.com/2016/11/Create-pure-CSS-based-toggle-visibility-button.png?resize=150%2C86 150w, http://i2.wp.com/images.phpgang.com/2016/11/Create-pure-CSS-based-toggle-visibility-button.png?resize=300%2C171 300w” sizes=”(max-width: 700px) 100vw, 700px” data-recalc-dims=”1″ />

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.

Tutorial Categories:

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:

3 responses to “Create pure CSS based toggle visibility button”

  1. Lorelle says:

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

  2. Luke G. says:

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

  3. Finally I have inserted your code in my website.

Leave a Reply

Your email address will not be published. Required fields are marked *