title: jQuery - Click Section to Hide but ignore when Inner Section Clicked
body: <pre><code>$(document).ready(function() {
    var $inners = $('.workSect .innerSect');
    $(".workSect").click(function() {
      var $inner = $(this).find('.innerSect'),
        visible = $inner.is(':visible');
      $inner.css({
        'visibility': visible ? 'hidden' : 'visible',
        'display': visible ? 'none' : 'block'
      });
      $inners.not($inner).hide();
    });
  });
  </code></pre>
  
  <p>I have this code. It reveals and hides an inner section when the outer section is clicked.  The inner section with class "innerSect" resides inside the outer section with class "outerSect"</p>
  
  <p>The code works as desires except for one thing. When the inner section is clicked on it closes up. Which it's technically supposed to do since the inner section is inside the outer section and clicking on the outer section is what opens and closes the inner section.</p>
  
  <p>What I would like is to have it ignore the inner section when clicked on. If it at possible.
  Maybe making a list instead of sections?
  Here is the <a href="https://jsfiddle.net/zvjpoqyx/" rel="nofollow">JSFiddle.</a></p>