Toggling hide/show Div's is not working.

Question

I have a container (#main_Container) that holds multiple forms. Each form is within it's own container( .module ). Within each of the (.module) containers, I have 2 icons which need to be able to expand and collapse their form. However, I cannot get them to act on their parent container. Every time I click expand or contract, all forms are affected.

<script>
    $(document).ajaxSuccess(function () {
        $("form.common").hide();

        $(".expand").click(function(){
            $(this).closest("form.common").show();
        });

        $(".collapse").click(function () {
            $(this).closest("form.common").hide();
        });
    });
</script>

<div id="main_Container">

    <div class="module">
        <h3>Customer Activity Log</h3>
        <div class="module_actions">
            <span class="icons_small right expand">+</span> <!-- -->
            <span class="icons_small right collapse">-</span> <!-- -->
        </div>
        <form class="common">
            <p>Form Stuff</p>
        </form>
    </div>

    <div class="module">
        <h3>Customer Activity Log</h3>
        <div class="module_actions">
            <span class="icons_small right expand">+</span> <!-- -->
            <span class="icons_small right collapse">-</span> <!-- -->
        </div>
        <form class="common">
            <p>Form Stuff</p>
        </form>
    </div>

</div>

Answer 1

.closest() will search for an element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

According to your DOM structure, form.common is sibling element for .expand and .collapse parent.

Try:

$(document).ajaxSuccess(function () {
     $("form.common").hide();
     $(".expand").click(function(){
         $(this).parents().next("form.common").show();
     })
     $(".collapse").click(function() {
         $(this).parents().next("form.common").hide();
     });
 });

WORKING DEMO

Answer 2

You are using .closest("form.common") , which only looks at the selected element and its parents up the DOM hierarchy. Since the <form> tag is not a parent of the span, it will not be selected.

You can use something like:

$(this).closest(".module_actions").next("form.common").show()

Answer 3

To work with expand/collapse, it'd be really helpful if you use IDs. A solution would be add an id to each form and work with data attributes. It'd be something like this:

HTML

<div class="module">
<h3>Customer Activity Log</h3>
<div class="module_actions">
   <span class="icons_small right expand" data-target="#form1">+</span> <!-- -->
   <span class="icons_small right collapse" data-target="#form1">-</span> <!-- -->
</div>
<form class="common" id="form1">
<p>Form Stuff</p>
</form>

</div>

JS

 $(".expand").click(function(evt){
   evt.preventDefault();

   var form = $(this).data("target");
   $(form).show();
});

$(".collapse").click(function(evt){
   evt.preventDefault();

   var form = $(this).data("target");
   $(form).hide();
});

Fiddle

If editing the HTML is not an option, then @Unknown answer is the best way to handle it.