Jquery how to check checkbox on div click, change class and show div
<p>I am trying to checkbox when the div.menuitem is clicked and then it should change class and show the content in the div with <strong>class</strong> of hidediv. When the div.menuitem is again clicked it should remove the class and hide the div again and uncheck the checkbox.</p>

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

<ol>
<li><p>Only show the content of the hidediv when the menuitem is pressed. (checkbox should be checked)</p></li>
<li><p>When the menuitem is pressed the checkbox should be checked</p></li>
<li><p>When the menuitem is clicked again the hidediv should be hidden again. (checkbox unchecked)</p></li>
<li><p>And the checkbox should be uncheched</p></li>
</ol>

<p>Illustration of my menu form:</p>

<pre><code>&lt;div class="menuitem"&gt;
1.Company1
&lt;/div&gt;
&lt;div class="hidediv"&gt;
1.1 Company 1.1 
1.2 Company 1.2
&lt;/div&gt;

&lt;div class="menuitem"&gt;
1.Company2
&lt;/div&gt;
&lt;div class="hidediv"&gt;
1.1 Company 2.1 
1.2 Company 2.2
&lt;/div&gt;
</code></pre>

<p>My previous Jquery code, which only is trigger when the checkbox is clicked. I want pretty 
similar function to this, the checkbox should also be trigghed when the div is clicked:</p>

<pre><code>$('.menuitem input:checkbox').change(function(){
        if($(this).is(':checked')) {
            $('div.hidediv').addClass('someclass').show(200); // not needed it there is another way of identifying the div later to add to hidediv class again.
            $('div.hidediv').removeClass('hidediv');
        } else {
            $('div.someclass').addClass('hidediv').hide(200); 
        }
});
});
</code></pre>

<p>My Jquery so far(not working):</p>

<pre><code>$('.menuitem').click(function(e){
$(this).addClass('menuclicked');          
$('div.hidediv').addClass('clicked').show(200);
            $('div.hidediv').removeClass('hidediv');
        } else {
            $('div.someclass').addClass('hidediv').hide(200); 
        }
$('.menuclicked').click(function(e){
$('div.someclass').addClass('hidediv').hide(200); 
});
</code></pre>

<p>My HTML:</p>

<pre><code>&lt;form accept-charset="UTF-8" action="/" method="get"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;/div&gt;

        &lt;div class="menuitem"&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="menuitem"&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="hidediv"&gt;
        &lt;div class="menuitem"&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&gt;
    &lt;input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" /&gt;
&lt;/form&gt;
</code></pre>
