Create pure CSS based toggle visibility button

December 12, 2024 11:17 pm

Create pure CSS based toggle visibility button

{ 3 Comments}

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.

DOWNLOAD CODE DEMO

Here is the HTML for design

<br />
<div class=”container”><br />
  <div class=”row”><br />
    <div class=”page-header”><br />
      <h1>CSS toggle visibility</h1><br />
    </div><br />
    <input type=”checkbox” id=”AddReview” name=”AddReview” class=”helper-trigger”/><br />
    <div class=”col-md-8 helper-show”><br />
      <div class=”row”><br />
        <div class=”col-md-6″><br />
          <div class=”form-group”><br />
            <input type=”text” name=”name” placeholder=”Name” class=”form-control”/><br />
          </div><br />
        </div><br />
        <div class=”col-md-6″><br />
          <input type=”email” name=”email” placeholder=”Email address” class=”form-control”/><br />
        </div><br />
      </div><br />
      <div class=”form-group”><br />
        <textarea placeholder=”What you say?” rows=”6″ class=”form-control input-lg”></textarea><br />
      </div><br />
      <div class=”form-group text-right”><br />
        <label for=”AddReview” class=”btn btn-link”><br />
          <u class=”text-muted”>Cancel</u><br />
        </label><br />
        <label for=”AddReview” class=”btn btn-primary”>Add review</label><br />
      </div><br />
    </div><br />
    <label for=”AddReview” class=”btn btn-default helper-hide”>Add review</label><br />
  </div><br />
</div>

<h1>CSS toggle visibility</h1>

</div>

</div>

</div>

</div>

<u class=“text-muted”>Cancel</u>

</label>

<label for=“AddReview” class=“btn btn-primary”>Add review</label>

</div>

<label for=“AddReview” class=“btn btn-default helper-hide”>Add review</label>

</div>

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

This is the CSS used to hide and show form

<br />
<link rel=”stylesheet” type=”text/css” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”><br />
<style><br />
.helper-trigger,<br />
.helper-show {<br />
  display: none;<br />
}</p>
<p>.helper-trigger[type=”checkbox”]:checked + .helper-show {<br />
  display: block;<br />
}<br />
.helper-trigger[type=”checkbox”]:checked + .helper-show + .helper-hide {<br />
  display: none;<br />
}</p>
<p></style>

<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.

Facebook

Tutorial Categories:

Facebook

Tutorial Categories:

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

Lorelle says:
November 1, 2016 at 12:52 pm
Seems more complicated than a perfectly simple and understandable javascript solution.
Reply
Luke G. says:
November 3, 2016 at 12:21 am
Nice functional solution where javascript might not be usable! Thanks for sharing this.
Reply
Anthony Tornambe says:
November 8, 2016 at 9:21 am
Finally I have inserted your code in my website.
Reply