A little help please. Very urgent!

[PcGeniusProductions]

Hi.

I am trying to get my chat-bar to not only become "visable" on mouse click, but also become "hidden" when it is clicked again. Here is the code to control the initial bar...

 

<div id="tchat_toolbar"><div style="float:left;margin:5px 10px"><!-- SPARE SPACE !--></div><div style="float:left;margin:5px 10px">'.$params->get('toolbarhtml').'</div><div id="tchat_friends" onclick="document.getElementById(\'tchat_friends_list_box\').style.visibility = \'visible\'">'._ONLINE_FRIENDS.' ('.$total.')</div></div>

 

 

Here is the code which commands the bar to show "hidden"

 

onclick="document.getElementById(\'tchat_friends_list_box\').style.visibility = \'hidden\'"

 

I do not know exactly what to do with this, I have tried a few times, but am almost certain i am going the wrong way about it. Also, if it is needed, here is the entire CSS Script for the chat bar(s)

 

#chat_1_window ul{
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}

.chat_notify_name{
color: red;
font-weight:bold
}


#chatwrapper{
position: fixed;
left: 1px;
bottom: -5px;
z-index:999;
width:100%;
}

#chatscroll a{
color:#202020;
}

#tchat_friends{
width: 160px;
font: 10pt tahoma bold #FFFFFF;
border-right: 3px solid #333333;
border-left: 3px solid #333333;
padding: 6px;
height:28px;
float: right;
margin-right: 30px;
cursor:pointer;
text-align:center;
background: #0066CC url(/modules/mod_oneononechat/theme/gradient.jpg) repeat-x;
}

#tchat_toolbar{
height:35px;
width:100%;
background: #0066CC url(/modules/mod_oneononechat/theme/gradient.jpg) repeat-x;
border-top: 1px solid #b5b5b5;
color:#202020;
}




.tchat_friends_list_box{
font: 10pt tahoma;
height: 120px;
width: 250px;
background: #FFF;
border: 1px solid #b5b5b5;
border-bottom: none;
visibility: hidden;
position: absolute;
top: -120px;
right: 30px;
}

#tchat_friends_list_box ul{
list-style: none;
}

#tchat_friends_list_box a{
text-decoration: none;
}

.tchat_close{
width: 100%;
height: 17px;
background:#3b5998;
color: #FFF;
font weight: bold;
text-align: right;
cursor: pointer;
}

 

Thanks for any help you can offer.

[TheFilmGod]

display: none;

[haku]

Ahhh, it's urgent. I'd better get working on it then. Working on it hard I am. I really am.

[PcGeniusProductions]

Hi.

Of course I know about the CSS Tag: "display:none" but I do not know where to implement it. For instance, if I just put in in the tag for the Bar-Opener, then it will remove the bottom. I want it so that the bar closes with a second click after being opened.

[Goafer]

i'd suggest something along the following lines:

<a href="javascript: ToggleDisplay('divName')">

where the toggledisplay is a javascript function:

  <script language="javascript">
    function ToggleDisplay(object)
  {
    if (document.getElementById(object).style.display == "none")
      {
        document.getElementById(object).style.display = "block";
      }
    else
      {
	    document.getElementById(object).style.display = "none";
	  }

  }
  </script>

Sorry I can't remember the exact javascript syntax so that might not be exactly right but that is it in essence

[PcGeniusProductions]

Ahh, yeah this is the right idea, thanks man it was the IF statements I was clueless about. I kept using this kind of syntax but without the IFF statement, resulting in everytime the bar was clicked, it tried to use both functions. Thanks, very much appreciated!