Question

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 class of hidediv. When the div.menuitem is again clicked it should remove the class and hide the div again and uncheck the checkbox.

Want I want to do:

1. Only show the content of the hidediv when the menuitem is pressed. (checkbox should be checked)

2. When the menuitem is pressed the checkbox should be checked

3. When the menuitem is clicked again the hidediv should be hidden again. (checkbox unchecked)

4. And the checkbox should be uncheched

Illustration of my menu form:

<div class="menuitem">
1.Company1
</div>
<div class="hidediv">
1.1 Company 1.1 
1.2 Company 1.2
</div>

<div class="menuitem">
1.Company2
</div>
<div class="hidediv">
1.1 Company 2.1 
1.2 Company 2.2
</div>

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:

$('.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); 
        }
});
});

My Jquery so far(not working):

$('.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); 
});

My HTML:

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

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

Answer 1

I can help. I think you are structuring this wrong. You have three fields in your html, with the third being hidden. I assume when you fill in the first one you want nothing to happen, but clicking the second one should show the third field?

Try this:

//Use toggle instead of .click()
$('.menuitem').toggle(function(){
    $('div.hidediv').addClass('clicked').show(200);
}, function(){
    $('div.hidediv').removeClass('clicked').hide(200);
});

This will effect all divs with the “menuitem” class, meaning when you click on any of the three it will toggle showing/hiding the div with the “hidediv” class.

edit you have a couple valid answers here, but I think you’re approaching this wrong. If you go try the jsfiddle posted by another user, whos’ javascript does the same as mine – it reveals the problem I talked about above. You cannot select all three boxes without some clever clicking. Each click will toggle showing/hiding the third check box. Might I suggest modifying your code like so:

//Use toggle instead of .click()
$('.toggleMenuItem').toggle(function(){
    $('div.hidediv').addClass('clicked').show(200);
}, function(){
    $('div.hidediv').removeClass('clicked').hide(200);
});

<form accept-charset="UTF-8" action="/" method="get">

    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="&#x2713;" />
    </div>

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

This will make it so only clicking the checkboxes with the class “.toggleMenuItem” will show the third checkbox.