javascript hide toggle using a class, or direct hide?

Question

What is more correct, and has better performance: I have a container with elements in it. Based on the button clicked I need to show/hide elements. Example:

<div id="panel">
   <button id="toggle-edit">Edit</button>
   <div class="form-group">
       <input type="text">
   </div>
   <div class="form-group">
       <input type="text">
   </div>
   <div class="form-group">
       <input type="text">
   </div>
</div>

now, what is better:
1) Using one class and some CSS rules:

#panel .form-group {display: none}
#panel.show-inputs .form-group {display: block}

And a simple JS:

$("#toggle-edit").click(function() {
   $("#panel").toggleClass("show-inputs") 
});

2) Using plain JS, no css classes:

$("#toggle-edit").click(function(){
   $("#panel .form-group").toggle();
   // I might want toggle this.value = "Cancel"/"Edit" as well
});

Is it technically good to use CSS class on a parent element to affect child elements visibility?

Answer 1

Here I built a tool to benchmark execution time for both methods.

Calling both methods 250 times and measuring milliseconds taken.

In my tests...

Class toggle took 7 to 10 milliseconds to run 250 times

jQuery toggle took 88 to 110 milliseconds to run 250 times

Feel free to run them in the snippet below yourself ;)

toggleClass = function() {
  $("#panel").toggleClass("show-inputs")
};
$("#toggle-class").click(toggleClass);

jQueryToggle = function() {
  $("#panel-jquery .form-group").toggle();
};

$("#toggle-hide").click(jQueryToggle);

// Demo first run
benchmark('start');
benchmark();

function benchmark(start) {
  var d = new Date();
  var ms = 1000 * 60 * d.getMinutes() + 1000 * d.getSeconds() + d.getMilliseconds();
  if (start) {
    this.initTime = ms
  } else {
    var timeTaken = ms - this.initTime;
    delete this.initTime;
    return timeTaken;
  }
}

function bench250() {
  var classTime, jqToggleTime;
  benchmark('start');
  for (var i = 0; i < 250; i++) {
    toggleClass();
  }
  classTime = benchmark()

  benchmark('start');
  for (var i = 0; i < 250; i++) {
    jQueryToggle();
  }
  jqToggleTime = benchmark()
  $(".results").append('<tr><th>' + classTime + '</th><th>' + jqToggleTime + '</th></tr>');
}


$(".test250").click(bench250);

#panel .form-group {
  display: none
}
#panel.show-inputs .form-group {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class='results' width='100%'>
  <tr>
    <td><h2>Test results</h2></td>
    <td><button class='test250'>Test 250 times</button></td>
  </tr>
  <tr>
    <th>Class Toggle</th>
    <th>jQuery Toggle</th>
  </tr>
</table>

<div id="panel">
  <h2>Toggle class</h2>
  <button id="toggle-class">Toggle Class</button>
  <div class="form-group">
    <input type="text">
  </div>
  <div class="form-group">
    <input type="text">
  </div>
  <div class="form-group">
    <input type="text">
  </div>
</div>

<div id="panel-jquery">
  <h2>jQuery Toggle</h2>
  <button id="toggle-hide">jQuery toggle()</button>
  <div class="form-group">
    <input type="text">
  </div>
  <div class="form-group">
    <input type="text">
  </div>
  <div class="form-group">
    <input type="text">
  </div>
</div>