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.

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

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