// how do I hide only the one I click on and not all of them

// how do I hide only the one I click on and not all of them



      <h4>Booleans</h4>
      <p>Booleans are either <kbd>true</kbd> or <kbd>false</kbd></p>
      <div id="boolean" class="solution">
        <ul>
          <li>
            <pre>
<code>
function testBoolean(val) {
  if(val == 7) {
    return "true";
  }
}
</code>
            </pre>
          </li>
        </ul>
      </div>
 <h4>Booleans</h4>
      <p>Booleans are either <kbd>true</kbd> or <kbd>false</kbd></p>
      <div id="boolean" class="solution">
        <ul>
          <li>
            <pre>
<code>
function testBoolean(val) {
  if(val == 7) {
    return "true";
  }
}
</code>
</pre>
          </li>
        </ul>
      </div>
 <h4>Booleans</h4>
      <p>Booleans are either <kbd>true</kbd> or <kbd>false</kbd></p>
      <div id="boolean" class="solution">
        <ul>
          <li>
            <pre>
<code>
function testBoolean(val) {
  if(val == 7) {
    return "true";
  }
}
</code>
</pre>
          </li>
        </ul>
      </div>

<script>
// how do I hide only the one I click on and not all of them
$(document).ready(function(){
  $('h4').on('click', function(){ 
    $('.solution').children().toggle();
  });
});
</script>