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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<div class=“container”>
<div class=“row”>
<div class=“page-header”>
<h1>CSS toggle visibility</h1>
</div>
<input type=“checkbox” id=“AddReview” name=“AddReview” class=“helper-trigger”/>
<div class=“col-md-8 helper-show”>
<div class=“row”>
<div class=“col-md-6”>
<div class=“form-group”>
<input type=“text” name=“name” placeholder=“Name” class=“form-control”/>
</div>
</div>
<div class=“col-md-6”>
<input type=“email” name=“email” placeholder=“Email address” class=“form-control”/>
</div>
</div>
<div class=“form-group”>
<textarea placeholder=“What you say?” rows=“6” class=“form-control input-lg”></textarea>
</div>
<div class=“form-group text-right”>
<label for=“AddReview” class=“btn btn-link”>
<u class=“text-muted”>Cancel</u>
</label>
<label for=“AddReview” class=“btn btn-primary”>Add review</label>
</div>
</div>
<label for=“AddReview” class=“btn btn-default helper-hide”>Add review</label>
</div>
</div>
|
Above HTML show a form and a button to view a form.
This is the CSS used to hide and show form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<link rel=“stylesheet” type=“text/css” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
<style>
.helper-trigger,
.helper-show {
display: none;
}
.helper-trigger[type=”checkbox”]:checked + .helper-show {
display: block;
}
.helper-trigger[type=”checkbox”]:checked + .helper-show + .helper-hide {
display: none;
}
</style>
|
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:
Tutorial Categories:
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.