title: How to collapse element on page load
body: <p>How can a div (menu) be collapsed when a HTML page has loaded? I tried using the following code but it's not working as the menu remains visible.</p>
  
  <blockquote>
    <p>When the page has loaded, I want the menu to be collapsed on <code>@media screen and (max-width: 768px)</code> only. When the menu is collpased, the button should say <code>menu +</code>. When the menu is visible, the button should say <code>menu -</code></p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#togglelink').click(function() {
    $('ul').toggle(300);
    if ($(this).text() == "menu +")
      $(this).text("menu -")
    else
      $(this).text("menu +");
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    width: 90%;
    height: auto;
    margin: 10px auto 10px auto;
    border: 2px solid #000000;
    background-color: #0099cc;
  }
  
  @charset "utf-8";
  
  /* CSS Document */
  
  body {
    font-family: 'Work Sans', sans-serif;
  }
  
  .wrapper h1 {
    font-size: 2.75em;
    line-height: 100%;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    color: #fff;
  }
  
  
  /*Header menu*/
  
  #menu {
    background: #ffffff;
    width: auto;
    margin-bottom: 5px;
  }
  
  #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    /* display: block;
  */
    zoom: 1;
    /* Added the following for flexbox */
    display: flex;
    flex-wrap: wrap;
  }
  
  #menu ul:after {
    content: ' ';
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  
  #menu ul li {
    /* float: left;
  */
    display: block;
    padding: 0;
    /* Added the following for flexbox */
    flex-grow: 1;
  }
  
  #menu ul li a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: 15px 25px;
    font-family: 'Work Sans', sans-serif;
    font-size: 1.5em;
    font-weight: 500;
    position: relative;
    -webkit-transition: color .25s;
    -moz-transition: color .25s;
    -ms-transition: color .25s;
    -o-transition: color .25s;
    transition: color .25s;
    /* Added the following for flexbox */
    /* So that text appear visually centered */
    text-align: center;
  }
  
  #menu ul li a:hover {
    color: #000;
  }
  
  #menu ul li a:hover:before {
    width: 100%;
  }
  
  #menu ul li a:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #000;
    -webkit-transition: width .25s;
    -moz-transition: width .25s;
    -ms-transition: width .25s;
    -o-transition: width .25s;
    transition: width .25s;
  }
  
  #menu ul li.last &gt; a:after,
  #cssmenu ul li:last-child &gt; a:after {
    display: none;
  }
  
  #menu ul li.active a {
    color: #000;
  }
  
  #menu ul li.active a:before {
    width: 100%;
  }
  
  .menu_toggle {
      display: none;
  }
  
  @media screen and (max-width: 768px) {
  
  
    #menu ul li {
      float: none;
      width: 100%;
    }
    #menu ul li a {
      width: 100%;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    #menu ul li a:after {
      display: none;
    }
    #menu ul li a:before {
      height: 1px;
      background: #000;
      width: 100%;
      opacity: .2;
    }
    #menu ul li.last &gt; a:before,
    #cssmenu ul li:last-child &gt; a:before {
      display: none;
    }
    .menu_toggle {
      visibility: visible;
      background-color: white;
      border: 3px solid black;
      color: black;
      text-align: center;
      text-decoration: none;
      display: block;
      font-size: 16px;
      font-size: 1.5em;
      padding: 0.5em 2em;
      font-weight: 500;
      margin: 0 auto;
      margin-bottom: 10px;
      cursor: pointer;
    }
    .menu_toggle:active {
      background-color: black;
      color: white;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="wrapper"&gt;
    &lt;div&gt;
      &lt;h1&gt;Hello World&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;button class="menu_toggle" tabindex="0" id="togglelink"&gt;menu +&lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="menu"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;January&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;February&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;March&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;April&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;May&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;June&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;July&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;August&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;September&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;October&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;November&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;&lt;span&gt;December&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;p&gt;
      Hello World
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>window.innerWidth &lt; 769 screens</strong>
  <a href="https://i.stack.imgur.com/h5MkK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h5MkK.png" alt="enter image description here"></a></p>
  
  <p><strong>window.innerWidth > 769 screens</strong>
  <a href="https://i.stack.imgur.com/8QHos.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8QHos.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/h5MkK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DOP6j.png" alt="enter image description here"></a></p>