JQuery help creating toggle function

Question

I am trying to create a function toggle menu.

Want I want to do:

When the user clicks on a menuitem div its checkbox should be checked and the minimenu should show underneath.
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');

        });
    });

did you try to write some code by yourself?

JMax
– JMax

2011-08-03 11:44:56 +00:00
Commented Aug 3, 2011 at 11:44 — JMax
– JMax, Commented Aug 3, 2011 at 11:44
Yes I have posted it in my question

Rails beginner
– Rails beginner

2011-08-03 11:46:38 +00:00
Commented Aug 3, 2011 at 11:46 — Rails beginner
– Rails beginner, Commented Aug 3, 2011 at 11:46

Ali Habibzadeh · Accepted Answer · 2011-08-03 12:25:45Z

2

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

        });

edited Aug 3, 2011 at 12:25

answered Aug 3, 2011 at 11:50

Ali Habibzadeh

11.6k4 gold badges56 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rails beginner Over a year ago

I have created the code that I wanted for category1, but can I make an function so that I dont write repeated code? I have updated my question

Rails beginner Over a year ago

I will there is just one little problem. When the checkbox is clicked it is checked and unchecked. See her: jsfiddle.net/2bCdR/2

Mr.T.K · Accepted Answer · 2011-08-03 11:54:33Z

0

Try this

$(".menuitem").click(function() {
$(".minimenu").slideDown();
$(".menuitem:checkbox").attr("checked", true);
if ($(".menuitem").is(":visible")) { 
    $("#accordion").slideup("fast"); 
$(".menuitem:checkbox").attr("checked", flase);
} 
})

answered Aug 3, 2011 at 11:54

Mr.T.K

2,3567 gold badges26 silver badges44 bronze badges

Comments

Drake · Accepted Answer · 2011-08-03 11:56:28Z

Here is an example I wrote that shows a menu item, title, contents and checkbox toggling

<head>
<script type="text/javascript" src="http://segnosis.net/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            var sub = $(this).children(".contents").first();

            if($(this).hasClass("menu-item") == true){
                sub.toggle();
                $("#option1").attr("checked", "checked");
            }
        });
    });
</script>
</head>
<body>
    <div class="menu-item">
        <h4>Menu Item 1</h4>
        <div class="contents">
            <input id="option1" type="checkbox" /><label for="test1">Option 1</label>
        </div>
    </div>
</body>
</html>

Collectives™ on Stack Overflow

JQuery help creating toggle function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related