title: How to combine media queries with javascript?
body: <p>I have a problem while using media queries. I have a web page which is sliced into 3 parts. Depending on the screen resolution or available width the regions will be shown. For example on resolutions with less than or equals to 1024, only 2 of 3 regions are shown. On resolutions less than or equals to 480, only 1 of 3 regions is shown. Resolutions greater than 1024, all three regions are shown. Each part can be expanded and collapsed again.</p>
  
  <p>Sample demo can be seen here <a href="http://jsfiddle.net/44QB3/" rel="nofollow">http://jsfiddle.net/44QB3/</a></p>
  
  <p>I wrote this code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Inventory details&lt;/title&gt;
          &lt;style&gt;
          html, body {
              height: 100%;
          }
          body {
              margin: 0px;
          }
          .container {
              padding-top: 50px;
              position: relative;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
              margin: 0px 10px;
              height: 100%;
          }
          .leftPanel {
              width: 34%;
              height: 100%;
              overflow: hidden;
              margin-right: 20px;
              float: left;
              position: relative;
          }
          .centerPanel {
              width: calc(33% - 20px);
              width: -webkit-calc(33% - 20px);
              width: -moz-calc(33% - 20px);
              height: 100%;
              overflow: hidden;
              margin-right: 20px;
              float: left;
              position: relative;
          }
          .rightPanel {
              width: calc(33% - 20px);
              width: -webkit-calc(33% - 20px);
              width: -moz-calc(33% - 20px);
              height: 100%;
              overflow: hidden;
              position: relative;
          }
          .headerPanel-Style {
              height: 25px;
              padding: 5px 0px;
              border-bottom: 1px solid #cfcece;
          }
          .bodyPanel-Style {
              height: calc(100% - 36px);
              height: -webkit-calc(100% - 36px);
              height: -moz-calc(100% - 36px);
              overflow-y: scroll;
          }
          .panel-Sidebar {
              width: 20px;
              height: 100%;
              background: #cfcece;
              position: absolute;
              top: 0px;
              left: 0px;
              display: none;
          }
          .toggleButton {
              width: 18px;
              height: 18px;
              border: 1px solid #cfcece;
              background: white;
              cursor: pointer; 
          }
          @media screen and (max-width: 1024px) {
              .leftPanel {
                  width: 60%;
              }
              .centerPanel {
                  margin-right: 10px;
                  width: calc(40% - 50px);
                  width: -webkit-calc(40% - 50px);
                  width: -moz-calc(40% - 50px);
              }
              .rightPanel {
                  width: 20px;
              }
              .rightPanel .panel-Header {
                  display: none;
              }
              .rightPanel .panel-Body {
                  display: none;
              }
              .rightPanel .panel-Sidebar {
                  display: block;
              }
          }
          @media screen and (max-width: 480px) {
              .leftPanel {
                  margin-right: 10px;
                  width: calc(100% - 60px);
              }
              .centerPanel {
                  width: 20px;
              }
              .centerPanel .panel-Header {
                  display: none;
              }
              .centerPanel .panel-Body {
                  display: none;
              }
              .centerPanel .panel-Sidebar {
                  display: block;
              }
          }
          .leftPanel-Collapse {
              width: 20px;
          }
          .leftPanel-Header-Collapse {
              display: none;
          }
          .leftPanel-Body-Collapse {
              display: none;
          }
          .leftPanel-Sidebar-Show {
              display: block;
          }
          .centerPanel-Expand {
              width: calc(100% - 60px);
              width: -webkit-calc(100% - 60px);
              width: -moz-calc(100% - 60px);
          }
          .centerPanel-Header-Expand {
              display: block;
          }
          .centerPanel-Body-Expand {
              display: block;
          }
          .centerPanel-Sidebar-Hide {
              display: none;
          }
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt;
          &lt;!--
          function init() {
              var centerToggle = document.getElementsByClassName("centerPanel")[0].getElementsByClassName("panel-Sidebar")[0].getElementsByClassName("toggleButton")[0];
              centerToggle.addEventListener("click", function() {
                  var leftPanel = document.getElementsByClassName("leftPanel")[0];
                  var leftPanelHeader = leftPanel.getElementsByClassName("panel-Header")[0];
                  var leftPanelBody = leftPanel.getElementsByClassName("panel-Body")[0];
                  var leftPanelSidebar = leftPanel.getElementsByClassName("panel-Sidebar")[0];
                  leftPanel.setAttribute("class", leftPanel.getAttribute("class") + " leftPanel-Collapse");
                  leftPanelHeader.setAttribute("class", leftPanelHeader.getAttribute("class") + " leftPanel-Header-Collapse");
                  leftPanelBody.setAttribute("class", leftPanelBody.getAttribute("class") + " leftPanel-Body-Collapse");
                  leftPanelSidebar.setAttribute("class", leftPanelSidebar.getAttribute("class") + " leftPanel-Sidebar-Show");
  
                  var centerPanel = document.getElementsByClassName("centerPanel")[0];
                  var centerPanelHeader = centerPanel.getElementsByClassName("panel-Header")[0];
                  var centerPanelBody = centerPanel.getElementsByClassName("panel-Body")[0];
                  var centerPanelSidebar = centerPanel.getElementsByClassName("panel-Sidebar")[0];
                  centerPanel.setAttribute("class", centerPanel.getAttribute("class") + " centerPanel-Expand");
                  centerPanelHeader.setAttribute("class", centerPanelHeader.getAttribute("class").replace("panel-Header", "") + " centerPanel-Header-Expand");
                  centerPanelBody.setAttribute("class", centerPanelBody.getAttribute("class").replace("panel-Body", "") + " centerPanel-Body-Expand");
                  centerPanelSidebar.setAttribute("class", centerPanelSidebar.getAttribute("class").replace("panel-Sidebar", "") + " centerPanel-Sidebar-Hide");
              }, false);
          }
          //--&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="init()"&gt;
          &lt;div class="container"&gt;
              &lt;div class="leftPanel"&gt;
                  &lt;div class="headerPanel-Style panel-Header"&gt;
                      Left Panel
                  &lt;/div&gt;
                  &lt;div class="bodyPanel-Style panel-Body"&gt;
                  &lt;/div&gt;
                  &lt;div class="panel-Sidebar"&gt;
                      &lt;div class="toggleButton"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="centerPanel"&gt;
                  &lt;div class="headerPanel-Style panel-Header"&gt;
                      Center Panel
                  &lt;/div&gt;
                  &lt;div class="bodyPanel-Style panel-Body"&gt;
                  &lt;/div&gt;
                  &lt;div class="panel-Sidebar"&gt;
                      &lt;div class="toggleButton"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="rightPanel"&gt;
                  &lt;div class="headerPanel-Style panel-Header"&gt;
                      Right Panel
                  &lt;/div&gt;
                  &lt;div class="bodyPanel-Style panel-Body"&gt;
                  &lt;/div&gt;
                  &lt;div class="panel-Sidebar"&gt;
                      &lt;div class="toggleButton"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Its working fine when I resize the browser. But when I start expanding and collapsinf the problem comes. Suppose I collapsed a region, say the first region, and then I start expanding the window little bit, say 1px to 2px. Now the panels behave in unexpected manner.</p>
  
  <p>What I want to achieve is to expand collapse panels while using media queires. I dont want to use jquery and similar apis. They are forbidden to use. </p>