Question

I am trying to make a jquery slideUp/slideDown when you click on a Menu item in the menu. I thought that I could do this by doing a conditional based on the value of the display attribute, but for some reason its not working. I must not be getting the attribute value correctly, what am I doing wrong?

$(document).ready(function() {
$("#left-help-menu li").click(function() {
    if($(this).children().attr('display') == 'none')
    {   
        $(this).children().css('display', 'block');
    }
    else if($(this).children().attr('display') == 'block')
    {
        $(this).children().css('display', 'none');
    }
});
})

Answer 1

display is not an attribute on the html-object. You need to check the value that you are setting with css on the next line:

if($(this).children().css('display') == 'none') {   
    $(this).children().css('display', 'block');
}

Better yet:

$(document).ready(function() {
    $("#left-help-menu li").click(function() {
        $(this).children().toggle();
    });
})

EDIT: Same code with comments and variables for clarity

$(document).ready(function() {

    // When all the html has been loaded we locate all the <li> tags
    var $lis = $("#left-help-menu li");

    // After that we bind the click event on them to an anonymous function
    $lis.click(function() {

        // Whenever a <li> is clicked this code will run.

        // First, lets get a hold of the clicked element
        var $li = $(this);

        // Now, find all the elements in that <li>
        $children = $li.children();

        // Lastly, lets hide or show them
        $children.toggle();
    });
})

Note: This does not actually make the content of the <li> “slide” up/down. If you want that you could use the $.slideToggle() method.