Responsive Design - how to toggle a menu's visibility

Question

Update

I have a new post here with jsfiddles and a clearer question.

---

I am attempting to use principles of responsive design to adapt to changing screen size. I have CSS which will hide a vertical menu contained in a div ( main-nav-vert ) and display a "Menu" button contained in a div ( div_menu_toggle ) when the browser width drops into a range. There is other div resizing happening, but this code is simplified.

When clicking on the Menu button, js code runs to toggle the menu div ( main-nav-vert ) by changing its display property.

All works great with the button appearing and the menu being hidden when the browser width shrinks.

Then when clicking on the Toggle Button, the menu is briefly made visible... and then spontaneously disappears again. I have verified that the code to hide the div is not being run ( .display = 'none' ). Is the menu getting hidden again because the CSS code is always active? If so, how can I accomplish this task? I am looking for a pure js answer, please no jQuery. Thanks.

CSS

/* When screen shrinks to this range, hide Menu, display Menu button   */
@media (max-width: 697px) and (min-width: 320px) {
    .div_menu_toggle{
        display: block;
    }
    .main-nav-vert{
        display: none;
    }
    
}

JS

<script type="text/javascript">
function showmenu() {
    var mainnavvert = getElementsByClassName('main-nav-vert');
    var i, s, len = mainnavvert.length;
    for (i = 0; i < len; ++i) {
        if (i in mainnavvert) {
        // toggle the menu
            mainnavvert[i].style.display = 'block';
        } else {
            mainnavvert[i].style.display = 'none';
        }
    }
}

function getElementsByClassName(className) {
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(className);
    } else {
        return document.querySelectorAll('.' + className);
    }
}
</script>

Answer 1

*not tested but I'm guessing you just need a separate class for display:none and display:block;

then change the class, not the style. something like

 if (i in mainnavvert) {
        // toggle the menu
            mainnavvert[i].className = "show-me";
        } else {
            mainnavvert[i].className = "hide-me";
        }
 }

Answer 2

Toggle the display depending of the current state of it. Something like this might work.

for (i = 0; i < len; ++i) {
    var menu = mainnavvert[i];
    if (menu.style.display === 'block') {
        menu.style.display = 'none';
    } else {
        menu.style.display = 'block';
    }
}

Answer 3

you need to take new class to set active/inactive toggle menu.

css

    /* When screen shrinks to this range, hide Menu, display Menu button   */
    @media (max-width: 697px) and (min-width: 320px) {
       .div_menu_toggle{
           display: block;
       }
       .main-nav-vert{
           display: none;
       }
       .main-nav-vert.active{
           display: block;
       }

    }

js

<script type="text/javascript">
function showmenu() {
    var mainnavvert = getElementsByClassName('main-nav-vert');
    var i, s, len = mainnavvert.length;
    for (i = 0; i < len; ++i) {
        if (i in mainnavvert) {
        // toggle the menu
            if(mainnavvert[i].style.display == "block")
               removeClass(mainnavvert[i]);
            }
            else {
               addClass(mainnavvert[i]);
            }
        }
    }
}

function getElementsByClassName(className) {
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(className);
    } else {
        return document.querySelectorAll('.' + className);
    }
}

function addClass(ele) {
    var classString = ele.className; 
    var newClass = classString.concat(" active"); 
    ele.className = newClass; 
}

function removeClass(ele)
{
    [].forEach.call(ele, function(el) {
       el.classList.remove("active");
    });
}

});

As you want pure javascript,here it is but code is going very smooth and optimze if you do it with jquery and I don't know why you use for loop if there is only 1 element then you can ignore the loop.