Question

I am trying to learn jQuery with the following scenario. For this, I tried the following jQuery after reading multiple SO questions; but it did not work

$(this).closest('.viewLogText').parent().find('.reportLog').css("display", "none");

Scenario:

There are three child div elements in a div that has Css class “repeaterRecord”. The child divs are with css classes – repeaterIdentifier, viewLogTitle and reportLog.

There are two divs with this structure (div that has Css class “repeaterRecord”).

The div with viewLog class is as shown below.

   <div class="viewLogTitle">
        <div class="viewLogText">
            View Report Log
        </div>
        <div>
            <img alt="Expand" src="Images/PlusIcon.GIF" class="expandLogIcon" />
            <img alt="Collapse" src="Images/MinusIcon.GIF" class="collapseLogIcon" />
        </div>
    </div>

When the collapseLogIcon image is clicked, I need to hide (only) the nearest div with “reportLog” class (at the same level of “viewLogTitle”). How can we do it using jQuery?

Updated Working Example:

http://jsfiddle.net/Lijo/L9w4F/11/ and
http://jsfiddle.net/Lijo/L9w4F/8/ and
http://jsfiddle.net/Lijo/L9w4F/12/

REFERENCE:

1. Efficient, concise way to find next matching sibling?

2. jquery select siblings 'until'

Answer 1

You can use siblings() method:

$(this).closest('.viewLogText').siblings('.reportLog').hide()

You can also try the hide() method which is same as .css("display", "none");