Im new to javascript so please go easy on me if ive made a really dumb mistake ok!

I have a div that i want to show and hide with a push of a button.....so the user can toggle it on and off. I had quite a successful first attempt with my cursory knowlege of javascript and was quite happy with it but i can only either get the div to show and then not hide or vice versa....depending on which way round i put the logic!

So here it is...first the function then how im calling it further down:

PHP Code:
    function show_chat() {
chat document.getElementById('chat');
chat.style.display 'block') {
chat.style.display 'none';
          else if(
chat.style.display 'none') {
chat.style.display 'block';

PHP Code:
<button onclick="show_chat(); return false;">show chat</button>
div id="chat_div"
Now what i want it to do is toggel on and off....what i'd really like to do is for the text of the button to change from show chat to hide chat. I have an idea how to do that and i know it involves getting to the text node and changing it from there.....please if anyone feels like enlightening me i'd be v.grateful!

As ive said in its current state it only turns the chat off and then i cant toggle it back on!

Any ideas?