Select div with class "n" after another div with another class with Jquery

Question

I have this jquery code to add the onclick event to minimize and maximize images collapsing and expanding the div with class mainBody.

It was working before I added the div with class divSectionInfo which is now meant to expand when you click on the icon16 image and collapse divSectionInfo when close image is clicked.

I am having problems to select the next div with class mainBody skipping the div with class divSectionInfo.

Html sample

<span class="section" style="clear: both">
    <div class="top">
        <h2>
            <a href="javascript: void(0);">Heading </a>
            <img src='../Images/min.gif' style='float:right;' alt='minimize'/>
            <img src='../Images/max.gif' style='float:right;' alt='maximize'/>
            <img src="../Images/icon16.png" style="margin-right: 50px;" alt="expand divSectionInfo" />
        </h2>
    </div>
    <div class="divSectionInfo">
        <span>This is text</span>
        <span>This is text</span>
            <img src="../GlobalResources/Images/close.png" alt="collapse divSectionInfo"/>
        </div>
    <div>
    <div class="mainBody"></div>//This div is supposed to collapse and expand when minimize and maximize button are clicked.
    </div>

Jquery Code.

  $("img[alt='maximize']").click(function (e) {
    //alert("2");
    $(this).closest("div").next("div").slideDown("fast");
    e.stopPropagation();
    return false;
});

To see a working example HERE, this is before adding the div with class divSectionInfo

This is afteradding the div with class divSectionInfo HERE

PD: For those who dont know jsbins, you can edit the code by clicking on the label at the top-right corner which shows up when you put the mouse in that corner and says edit edit using jsbin.

Thanks.

Answer 1

jQuery:

$(this).closest("div").siblings("div").find("div.mainBody:eq(0)")

Works, but you should probably go with an ID as mentioned in other answers. Basically not depending on a deep node hierarchy (parent div with sibling div containing div with class mainBody - the first of those, please!) but instead going to the .section and then find the .mainBody (cf. Nick Craver's answer). That way you selector is less prone to err if (when!) the markup changes.

Answer 2

I'd use .closest() and .find() to be the most flexible here, like this:

$("img[alt='maximize']").click(function (e) {
  $(this).closest(".section").find(".mainBody").slideDown("fast");
  e.stopPropagation();
});

You can see your demo updated/working with this code here. I would give your buttons a class though, for example:

<img class="minimize" src='http://png.findicons.com/files/icons/653/the_spherical/32/minimize.png' style='float:right;' alt='minimize'/>
<img class="maximize" src='http://www.winnipegringette.com/images/icons/maximize.png' style='float:right;' alt='maximize'/>

Then change your selectors to use that, $("img.maximize") instead of $("img[alt='maximize']").