Create pure CSS based toggle 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.