如何将元素设置为默认条件（隐藏（））以及单击时的设置（显示（））

Question

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.

Here's my code:

$('.msg_wrap').hide();
$('.msg_box').hide();
    $('.chat_user').click(function() {          
        $('.msg_wrap').show();
        $('.msg_box').show();
} 

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?

Answer 1

A quick thought on a solution.

First. Set the elements ('.msg_wrap') and ('.msg_box') to hidden in your html and kill your first two lines of code. I am not sure what those elements specifically are, but, for example, if they were div tags it would look something like:

<div hidden class="msg_wrap">

Second. I am not sure if you are saying that the code currently isn't working on page load. It looks like you are missing a ) at the end and also you can update to the following so that it gets executed on page load.

$(function(){
   $('.chat_user').click(function() {          
        $('.msg_wrap').show();
        $('.msg_box').show();
    }); 
});

This is jquery shorthand for $( document ).ready().

Also, if you want the msg_wrap and msg_box elements to toggle between being hidden and shown you can use the toggle() method instead of show().