Javascript toggle off re-enable css

Question

I have currently a menu which toggles on/off with a piece of javascript code, when the menu toggles on, there is css thats added to html and body to stop scrolling. Now my issue is that, when the menu toggles off the styles seem to stay so i've added some code so that overflow and height on body and html go back to auto on toggle off.

This presents two problems.

Menu now no longer toggles on.

Still the initial problem, I need the html and body to go back to its normal scrollable state.

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
    e.style.display = 'none';
    $('html, body').css({
        'overflow': 'auto',
        'height': 'auto'
    });
    else
    e.style.display = 'block';
    $('html, body').css({
        'overflow': 'hidden',
        'height': '100%'
    });
}

Would much appreciate all and any help.

Thanks !

Since e.style.display = 'block' and $('html, body').css({ 'overflow': 'auto', 'height': 'auto' }); are not within the curly braces, css part will always be called irrespective of the condition — Mukesh Agarwal
– Mukesh Agarwal, Commented Jan 31, 2015 at 6:35
Hey @Daniel , I've put the curly braces around if and else blocks and everything is perfect now, exactly what i needed. It's a shame you didn't post that as an answer or else I would vote your answer as the correct answer. All in all, thanks a bunch you rock Daniel. — Dan
– Dan, Commented Jan 31, 2015 at 6:59
Also @MukeshAgarwal , even though you did not say to wrap if and else in curly braces, your comment still outlined where it was my mistake was. Thanks bro ! — Dan
– Dan, Commented Jan 31, 2015 at 7:02

Daniel · Accepted Answer · 2015-01-31 07:47:28Z

1

Put your if and else block in braces

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')

{

    e.style.display = 'none';
    $('html, body').css({
        'overflow': 'auto',
        'height': 'auto'
    });

}
    else

{
    e.style.display = 'block';
    $('html, body').css({
        'overflow': 'hidden',
        'height': '100%'
    });

}

}

answered Jan 31, 2015 at 7:47

Daniel

4,9643 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript toggle off re-enable css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related