Question

For this collapsible menu in this page:
http://2ddige.com/temps/Services/proteomics%202d_dige_copy%281%29.html

What changes need to be made in the code so that only the “Gel-Based Proteomics” section is expanded and the other 3 categories collapsed?
Javascript:

// Appear/Disappear
            $('#menu4 > li > a.expanded + ul').show();
            $('#menu4 > li > a').click(function() {
                $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').toggle();
            });
            $('#example4 .expand_all').click(function() {
                $('#menu4 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').show();
            });
            $('#example4 .collapse_all').click(function() {
                $('#menu4 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').hide();
            });

HTML: the expanded state is governed by the class called “expanded

The CSS:
.leftmenu a.expanded {
background: url(‘../Images/collapse8.png’) no-repeat 50%;
line-height: 35px;
color: #333333;
font-size: 11px;
width: 243px;
padding-left: 30px;

    }
    .leftmenu a.collapsed {
        background: url('../Images/expand8.png') no-repeat 50%;
        line-height: 35px;
        color: #333333;
        font-size: 11px;
        width: 243px; 
        padding-left:30px;
}

I tried changing the class to “collapsed” but all it does it change the background image and the block is still expanded.

Any help is appreciated. Thanks.

Answer 1

If you change the class of the menu items you want closed to collapsed then you can add the following line in the javascript to have the menus closed on load:

$('#menu4 > li > a.collapsed + ul').hide();

Your javascript should now look like this:

// Appear/Disappear
$('#menu4 > li > a.expanded + ul').show();
$('#menu4 > li > a.collapsed + ul').hide();
$('#menu4 > li > a').click(function() {
    $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').toggle();
});
$('#example4 .expand_all').click(function() {
    $('#menu4 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').show();
});
$('#example4 .collapse_all').click(function() {
    $('#menu4 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').hide();
});​