Question

I have a chat feature on my site, and users click a button to open it

$(function() { 
$('#chat').hide(); // hides the chat on load

$("#chat_btn").click(function(){ 
    $('#chat').show();
    $('#chat').load("chat.php");
    }); 
});

This all works fine, but I want to be able to click the same button to close the chat too.

I know there’s some kind of toggle function instead of hide and show, but I want the other command (load the chat.php) to run only on the open.

How can I do this?

Answer 1

You can use the other toggle function: it takes two (or more) event handlers: the first is called the first time, the second the second time, the first the third time, etc.

$("#chat_btn").toggle(function(){ // run the first time
    $('#chat').show();
    $('#chat').load("chat.php");
}, function() { // run the second time
    $('#chat').hide();
});

NB that you could make this (a tiny bit) more efficient by chaining the show and load calls:

    $('#chat').show().load("chat.php");