How to Create pure CSS based toggle visibility button?

Its a very simple 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.

<div class="container">
  <div class="row">
    <div class="page-header">
      <h1>Pure CSS based toggle</h1>
    </div>
    <input type="checkbox" id="AddUser" name="AddUser" class="helper-trigger"/>
    <div class="col-md-12 helper-show">
      <div class="row">
        <div class="col-md-8">
          <div class="form-group">
            <input type="text" name="user_name" placeholder="Name" class="form-control"/>
          </div>
        </div>
         <div class="col-md-8">
          <div class="form-group">
            <input type="password" name="user_pass" placeholder="Password" class="form-control"/>
          </div>
        </div>
        <div class="col-md-8">
          <input type="email" name="user_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="AddUser" class="btn btn-link"> <u class="text-muted">Cancel</u> </label>
        <label for="AddUser" class="btn btn-primary">Add User</label>
      </div>
    </div>
    <label for="AddUser" class="btn btn-default helper-hide" style="color:#0000CC; font-weight:bold; font-size:14px;">Add User</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>
body {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
}
.helper-trigger, .helper-show {
  display: none;
  color:#FF0000;
}
.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.

If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!