JavaScript & CSS - How to make elements hidden/visible?

JavaScript & CSS - How to make elements hidden/visible?

Hello,

I'm using CSS media queries for responsive design, I have menu on the left side and content on the right side. On a mobile device only the menu is visible, right content is hidden. What's the simplest way to make right content visible and hide the menu as user clicks on a link? The problem I have, JavaScript is contradicting with CSS media queries. When I use JavaScript code to display content, it doesn't display because apparently CSS is preventing.

Here's the JavaScript code, which toggles element's visibility:

function toggle_visibility()
{
      for(var i = 0, len = arguments.length;i < len; i++)
      {
            var e = document.getElementById(arguments[i]).style;
            e.display = (e.display == "none") ? "inherit" : "none";
      }
}

Works properly on big screen, but not on mobile screen.

Any help would be appreciated ASAP.