Question

Code example: http://codepen.io/asuh/pen/JgdLK

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

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.

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.

Here’s the JS:

$('.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');
});

I keep trying something like this but it doesn’t work:

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

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

Answer 1

Filter the .module-content-elements .
All elements with a offset().left equal to the clicked element’s offset().left , and a offset().top higher than the offset().top of the clicked element are placed underneath the clicked element.

    $('.module-content').click(function() {
  var offset=$(this).offset();
   var $this = $(this).closest('section').find('article');
  $('.module article').not($this).slideUp();
  $('.module-content').parent().css('visibility','visible');
  if($this.is(':hidden'))
  {$('.module-content')
    .filter(function(){return ($(this).offset().left==offset.left 
                                && $(this).offset().top>offset.top);})
      .parent().css('visibility','hidden');}

  $this.slideToggle('slow').addClass('active');
});