my menu overflows the space

Issue

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');

....

});

Answered By – Anton

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0