Question

Check out code here!

These are my problems:

1. Div won’t toggle to hide when self is clicked, only when i click another. ( edit: or basically anywhere )

2. All divs that are supposed to be hidden blink in when page is loaded and then disappear. Any way to avoid that? ( solved it! css display:none;)

3. The clicked div should keep its highlighted background color until another or self is clicked. Can’t figure that one out.

4. (on the side) when i open the page on the ipad, the menu_row keeps its :hover backgroundcolor when clicked. That is ok, but when self is clicked and the showed div retracts it should revert to gray. Possible?

Answer 1

1.

jQuery(document).ready(function($) {

    //cache the `.menuImage` elements since they will be used frequently
    var $menuImages = $(".menuImage").hide('slow');
    $(".menuItem").click(function() {

        //get the `.menuImage` element that is a child of the clicked element
        var $ele = $(this).children(".menuImage");

        //`.slideUp()` all the `.menuImage` elements that aren't a child of the clicked element
        $menuImages.not($ele).slideUp(500);

        //toggle the visibility of the child of the clicked element
        $ele.slideToggle(500);
    });
});​

Demo: http://jsfiddle.net/jasper/XcJwW/17/

3.

jQuery(document).ready(function($) {
    var $menuImages = $(".menuImage").hide('slow');
    $(".menuItem").click(function() {
        var $ele = $(this).children(".menuImage");

        //not only slide the rest of the `.menuImage` elements away, but also remove the `hover` class from them
        $menuImages.not($ele).slideUp(500).parent().removeClass('hover');

        //not only toggle the view of the clicked `.menuImage` element, but also toggle the `hover` class for the element
        $ele.slideToggle(500).parent().toggleClass('hover');
    });
});​

This requires a small tweak to your CSS:

#menu_row1 .menuItem:hover, #menu_row1 .menuItem.hover { background:#ff0000; }
#menu_row2 .menuItem:hover, #menu_row2 .menuItem.hover { background:#ffe100; }
#menu_row3 .menuItem:hover, #menu_row3 .menuItem.hover { background:#0033cc; }

Notice the user can either hover over one of these elements or you can give the element the hover class, both will have the same outcome.

Demo: http://jsfiddle.net/jasper/XcJwW/20/