title: Javascript (Resize when browser window is over 436px)
body: <p>I will try to explain in details what I want, since it's hard to explain how I want it to be.
  I've created a responsive website, where I want to show 3 boxes:</p>
  
  <p>(Day 1 - Day 2 - Day 3)</p>
  
  <p><a href="https://i.stack.imgur.com/soN8m.png" rel="nofollow noreferrer">See image how I want it to look</a></p>
  
  <p>The issue (Try this and U will see what is my issue: </p>
  
  <ol>
  <li>Resize the screen window to less then 436px (So u get the red boxes)</li>
  <li>Then click on Day 2, which then opens the content of Day 2</li>
  <li>Start to resize the browser (This will then close the box "Day 2"
  automatically. I dont want it to close when I resize.</li>
  </ol>
  
  <p>The reason why I have created the resize, was for the desktop, so it was expanding all the boxes when seen on desktop.</p>
  
  <p><strong>MY CODE:</strong></p>
  
  <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>$(document).ready(function() {
          if($(window).width()&lt;436)
        $('.bbottom2').hide();
        $('.btop').click(function(e) {
          e.preventDefault();
          var $menuItem = $(this).next('.bbottom, .bbottom2');
          $menuItem.slideToggle();
        });
   });
   
   
        $( window ).resize(function() {
          if($(window).width()&gt;436) $('.bbottom, .bbottom2').show();
          else $('.bbottom2').hide();
        });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ticket{
    margin:0;
    padding:0;
    float:left;
  }
  
  .btop2, .btop{
    background-color:grey;
    color:white;
    padding:5px 10px;
    display:block;
    width:100px;
    border-bottom:1px solid;
    pointer-events:none;
  }
  
  .btop:hover{
    background-color:darkgrey;
  }
  
  /*Responsive*/
  @media screen and (max-width: 436px) {
  
  .ticket{
    margin:0;
    padding:0;
    float:none;
  }
  
  .btop{
    background-color:red;
    pointer-events:auto;
  }
    
    
  
  .btop:hover{
    cursor:pointer;
  }
    
  }</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="ticket"&gt;
      &lt;div class="btop"&gt;Day 1&lt;/div&gt;
      &lt;div class="bbottom"&gt;Price 20&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="ticket"&gt;
      &lt;div class="btop"&gt;Day 2&lt;/div&gt;
      &lt;div class="bbottom2"&gt;Price 99&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="ticket"&gt;
      &lt;div class="btop"&gt;Day 3&lt;/div&gt;
      &lt;div class="bbottom2"&gt;Price 149&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>