how do i target divs to make them invisible during click function?
<p>Code example: <a href="http://codepen.io/asuh/pen/JgdLK" rel="nofollow">http://codepen.io/asuh/pen/JgdLK</a></p>

<p>This is for a responsive design I'm working on. The amount of columns will change depending on my breakpoints and width of the divs at this breakpoints</p>

<p>When you click on any of the divs, the hidden content appears in an absolutely positioned div relative to its parent. It functions as a drop down full of links.</p>

<p>In this example, what I need to do is target the container(s) below the active drop down and make that or those containers fade out or invisible. Currently, you can see the container box shadows showing through the edges of the drop down and I'd prefer for them to just be completely or mostly invisible.</p>

<p>Here's the JS:</p>

<pre><code>$('.module article').each(function() {
    $(this).hide();
});
$('.module-content').click(function() {
  var $this = $(this).closest('section').find('article');
  $('.module article').not($this).slideUp();
  $this.slideToggle('slow').addClass('active');
});
</code></pre>

<p>I keep trying something like this but it doesn't work:</p>

<pre><code>if($('.module article').hasClass('active')) {
     $('.module:nth-child(3)').fadeTo('fast',0);
}
</code></pre>

<p>How do I modify the above to make it work? Or am I approaching it the wrong way?</p>
