How to hide a parent div which has nested div inside

Question

HTML:

<div class="btn-small blue">
    <span class="label bottom">Vascular Surgery</span>
</div>

<div class="btn-small red">
    <span class="label bottom">Administrator</span>
</div>

<div class="btn-small blue">
    <span class="label bottom">Cardiology North</span>
</div>

<div class="calContent">
    <div class="divContent">
        <div class="divContentHolder">
            <div>
                VASCULAR CURGERY
            </div>
            <div>
                CALENDAR GOES HERE
            </div>
        </div>
    </div>
    <div class="divContent">
        This is Second
    </div>
    <div class="divContent">
        This is Third
    </div>
</div>

Fiddle: https://jsfiddle.net/geetof8x/

If I remove the following code:

<div class="divContent">
    <div class="divContentHolder">
        <div>
            VASCULAR CURGERY
        </div>
        <div>
            CALENDAR GOES HERE
        </div>
    </div>
</div>

With:

<div class="divContent">
    This is First
</div>

The script works fine but with the added extra div inside the divContent div, the code doesn't work correctly.

The removed code will be used in the final template. How can I edit the javascript so it can handle either case scenario.

Answer 1

You're only interested in the children (not grandchildren, etc.) of .calContent .

One solution is to use the child selector to limit your selection to only the direct children:

$('.calContent > div:eq(' + $(this).index() + ')').fadeOut();

Updated Fiddle