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.

Here is the HTML for design

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

<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 the checked event.

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