Search code examples
javascriptjquerycssmenu

my menu overflows the space

I have tried to make a menu that collapses earlier expanded chioces but i cant make it work. 

var currentId;

$(document).ready(function () {
    $(":range").rangeinput({
        progress: true
    });

    /* Slide Toogle */
    $("ul.expmenu li > div.header").click(function () {
        var arrow = $(this).find("span.arrow");

        if (arrow.hasClass("up")) {
            arrow.removeClass("up");
            arrow.addClass("down");
        } else if (arrow.hasClass("down")) {
            arrow.removeClass("down");
            arrow.addClass("up");
        }

        $('#' + currentId).parent().find("ul.menu").slideToggle();
        $(this).parent().find("ul.menu").slideToggle();
        currentId = $(this).attr('id');
    });
});

You can find the homepage at this adress: http://admin.dq.se/kramers/nyamenyer.html

So if I press "BIL" i want "BIL" to expand .. and afterwards if i press "MC" i want BIL to collapse and MC to expand. Thanks for the help!

Solution

  • Slide up everything before sliding down

    $("ul.expmenu li > div.header").click(function () {

 $(this).parent().siblings().find('ul.menu').slideUp();
 $(this).parent().siblings().find('span.arrow').removeClass('up').addClass('down');

....

});