CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Psycho Pass
Psycho Pass

Reputation: 5

Collapsible menu variations

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.

Upvotes: 0

Views: 409

Answers (1)

3dgoo
3dgoo

Reputation: 15794

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

Upvotes: 0

Related Questions