Question

I want to hide all blocks which only contain hidden DIVs (aside from a caption). All elements have to be selected via class names.

In detail, I want each ‘eventBlock’ not to show up when all ‘groupBlocks’ underneath are already hidden. The same with ‘Menu’ which should not show up when all child eventBlocks are hidden.

Each ‘Menu’ contains multiple eventBlocks,

each ‘eventBlock’ contains 1 or more groupBlocks.

I am using classes and cannot use IDs because there are lots of groupBlocks, eventBlocks etc.

DIVs are hidden using JQuery’s ‘hide()’ function, if it’s relevant.

My HTML basically looks like this:

<div class='Menu'>      <strong><a name='one'>Menu CAPTION</a></strong><br />      <div class='eventBlock event1'>          <p class='underlined'>eventBlock CAPTION</p>          <div class='groupBlock group2'>              <strong>name</strong><br />              4pm - 6pm<br />          </div>          <div class='groupBlock group1'>              <strong>name</strong><br />              5pm - 7pm<br />          </div>      </div> </div> 

Answer 1

$('eventBlock').each(function() {     if ($('.groupBlock:visible', this).length)         $(this).show();     else         $(this).hide(); }); 

could be implemented as plugin