title: How to set an element to a default condition (hide ()) and when clicked (show())
body: <p>Say I have a left-side chat bar with chat users. Each user has their image (much like Facebook's chat)and is clickable to open a chat box to start chatting away.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>$('.msg_wrap').hide();
  $('.msg_box').hide();
      $('.chat_user').click(function() {          
          $('.msg_wrap').show();
          $('.msg_box').show();
  } 
  </code></pre>
  
  <p>I know this is wrong but what I want to do here is when the page loads for the first time, all the chatboxes to be hidden (hide ()). It is not until I click on a chat user (.chat_user) that a pop up/chat box appears (show()). How do I fix this code? Do I have to create a function?</p>