Question

I am trying to create a function toggle menu.

Want I want to do:

1. When the user clicks on a menuitem div its checkbox should be checked and the minimenu should show underneath.

2. If a user clicks again on the menuitem div the minmenu should hide and the menuitems checkbox should be uncheched.

My test with one div that is not working:

$('div#category1').click(function(e){
    $('div#minimenu1').removeClass('hidediv');
    $('div#minimenu1').addClass('someclass').show(200);
    $('div#minimenu1').toggle(200);
});
});

My CSS:

.hidediv {display:none;}

My HTML:

        <div class="menuitem" id="category1">
        <label for="search_company1">company1</label>

        <input name="search[company1_is_true]" type="hidden" value="0" /><input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
        </div>
<div class="hidediv" id="minimenu1">
        <label for="search_company3">company3</label>
        <input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
        </div>
 <div class="category2">
        <label for="search_company2">company2</label>
        <input name="search[company2_is_true]" type="hidden" value="0" /><input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
    <div>
<div class="hidediv" id="minimenu2">
        <label for="search_company3">company3</label>
        <input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
        </div>

    <input id="submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>

UPDATE:

Now I have made the code that I want to use, but how do I make an smart function so that I dont need to repeat the code over and over again for each menuitem?

My Jquery code for category1:

$(function () {

        $('div#category1').toggle(function () {

            $('div#minimenu1').removeClass('hidediv');
            $('div#category1').addClass('clicked').show(200);
            $('div#minimenu1').addClass('someclass').show(200);
            $('div#category1 input:checkbox').attr('checked','checked');

        }, function () {
            $("div#category1 input:checkbox").prop("checked", false);
            $('div#minimenu1').addClass('hidediv');
            $('div#category1').removeClass('clicked');

        });
    });

My Jquery code for category2:
$(function () {

        $('div#category2').toggle(function () {

            $('div#minimenu2').removeClass('hidediv');
            $('div#category2').addClass('clicked').show(200);
            $('div#minimenu2').addClass('someclass').show(200);
            $('div#category2 input:checkbox').attr('checked','checked');

        }, function () {
            $("div#category2 input:checkbox").prop("checked", false);
            $('div#minimenu2').addClass('hidediv');
            $('div#category2').removeClass('clicked');

        });
    });

Answer 1

$(function () {

        $('div#category1').toggle(function () {

            // do the things you want to happen firt time user clicks

        }, function () {
            // do the opposite things you want to happen second time user clicks
        });
    });

And for checking checkboxes if you are using the new version of jQuery go for:

$(".myCheckbox").prop("checked", true);

If not:

$('.myCheckbox').attr('checked','checked');

You can make your code modular by using the each function and referring to elements using the this keyword (but you need to leave the IDs and add a class to your divs class=’category’ and take it from there using something like this):

$.each($('div.category'), function () {

            var categoryDiv = $(this);
            var relativeMinimenu = categoryDiv.next();

            categoryDiv.toggle(function () {
                relativeMinimenu.removeClass('hidediv').addClass('someclass').show(200);
                categoryDiv.addClass('clicked').show(200);
                categoryDiv.find('input:checkbox').attr('checked', 'checked');
            }, function () {
                categoryDiv.removeClass('clicked').find('input:checkbox').prop("checked", false);
                relativeMinimenu.addClass('hidediv');
            });

        });