I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.

<script>
     $(document).ready(function () {

        $("formmon").first().show();
             $(".expand").click(function () {
                 $(this).parents().next("formmon").show();
             })
             $(".collapse").click(function () {
                 $(this).parents().next("formmon").hide();
             });
             $(".close").click(function () {
                 $(this).parents().next("div.module").hide();
             });
    });
 </srcipt>
 <div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
 <h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
    <span class="icons_small right close">X</span>
    <span class="icons_small right collapse">-</span>
    <span class="icons_small right expand">+</span> 
</div>  
<form class="mon">
    <fieldset>
     <legend> Some Titlee/legend>
    </fieldset>
</form>
</div>

Can anyone see why this is not hiding the div? THanks,

I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.

<script>
     $(document).ready(function () {

        $("form.mon").first().show();
             $(".expand").click(function () {
                 $(this).parents().next("form.mon").show();
             })
             $(".collapse").click(function () {
                 $(this).parents().next("form.mon").hide();
             });
             $(".close").click(function () {
                 $(this).parents().next("div.module").hide();
             });
    });
 </srcipt>
 <div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
 <h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
    <span class="icons_small right close">X</span>
    <span class="icons_small right collapse">-</span>
    <span class="icons_small right expand">+</span> 
</div>  
<form class="mon">
    <fieldset>
     <legend> Some Titlee/legend>
    </fieldset>
</form>
</div>

Can anyone see why this is not hiding the div? THanks,

• javascript
• jquery
• html
• css

• Do you see any errors in the console? Other wise your code should work. Also by the way use closest(''.module_actions') instead of parents() – PSL Commented Sep 21, 2013 at 18:43
• @PSL, there were no console errors but using .closest worked for me, thanks!!! – Mark Commented Sep 21, 2013 at 18:48
• in that case you have more code than what you showed.. That is why parents() did not work for you. – PSL Commented Sep 21, 2013 at 18:50

3 Answers 3

The answer is in the question:

$(".close").click(function () {
    $(this).closest("div.module").hide();
});

Demo fiddle

Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree

You had a missing < in <legend> Some Titlee/legend>, after that it works.

Check here

This should work :

  $(".close").click(function () {
       $(this).parent().hide();
   });

JSFiddle
Doc : parent()