title: Use an if else function to resize content using javascript
body: <p>I'm new to the website so I apologize if I'm doing something wrong here.</p>
  
  <p>Alright so here is my problem. I have 3 div next to each others. One of them is a menu, the second is a player and the third a chat box.</p>
  
  <p>The set up is the following. When I open the menu to display the submenu, the player slides out to the right pushing the chat box under the player. </p>
  
  <p>I thought of using javascript to resize the chat box size whenever the menu is triggered. </p>
  
  <p>This is what I have so far :</p>
  
  <pre><code>$(document).ready(function(){
  $(".zocial-youtube").click(function(){
      $(".container").css({"width": "30%"});
  });
  </code></pre>
  
  <p>});</p>
  
  <p>And it works! </p>
  
  <p>The problem is when I close the sub menu and the player slides back to its original position, the chat box does not resize to its original size.</p>
  
  <p>I feel like I need to use the if else function but I can't figure out the code.</p>
  
  <p>Could you help me with the function please?</p>
  
  <p>THIS IS THE WHOLE CODE : <a href="https://codepen.io/LAMUUZ/pen/JJrodY" rel="nofollow noreferrer">https://codepen.io/LAMUUZ/pen/JJrodY</a></p>