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

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']").