Jquery help creating toggle function
<p>I am trying to create a function toggle menu.</p>

<p>Want I want to do:</p>

<ol>
<li><p>When the user clicks on a menuitem div its checkbox should be checked and the minimenu should show underneath. </p></li>
<li><p>If a user clicks again on the menuitem div the minmenu should hide and the menuitems checkbox should be uncheched.</p></li>
</ol>

<p>My test with one div that is not working:</p>

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

<p>My CSS:</p>

<pre><code>.hidediv {display:none;}
</code></pre>

<p>My HTML:
    </p>

<pre><code>        &lt;div class="menuitem" id="category1"&gt;
        &lt;label for="search_company1"&gt;company1&lt;/label&gt;

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

    &lt;input id="submit" name="commit" style="display:none;" type="submit" value="Submit" /&gt;
&lt;/form&gt;
</code></pre>

<p>UPDATE:</p>

<p>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?</p>

<p>My Jquery code for category1:</p>

<pre><code>$(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');

        });
    });
</code></pre>

<p>My Jquery code for category2: 
    $(function () {</p>

<pre><code>        $('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');

        });
    });
</code></pre>
