Basic jQuery slideUp/slideDown help

Question

I was wondering if there was a function that I can add to this, that would show the data again, as in make it slide back down or something after a given set of time so you can go back and re-enter your data.

It currently just slides up after submit, and then shows the text.

 $("#help").slideUp(function() {
$("#help").before('<div class="failMessage">SOME FAIL TEXT HERE</div>');
setTimeout(ShowControlsHideFailMessage,5000);
 });

    function ShowControlsHideFailMessage()
    {
       $("#help").slideDown();
       $('.failMessage').addClass('hidden');
    }

Answer 1

The code sample below will use the setTimeout function to call $("#help").slideDown() after 5 seconds. Also, If you want to hide the "FAIL TEXT", I'd suggest using a CSS class for that message like this:

$("#help").slideUp(function() {
   $("#help").before('<div class="failMessage">SOME FAIL TEXT HERE</div>');
   setTimeout(ShowControlsHideFailMessage, 5000);
});

function ShowControlsHideFailMessage()
{
   $("#help").slideDown();
   $('.failMessage').addClass('hidden');
}

You can use the class failMessage for red fonts or anything special to that message and then create a hidden class that sets the display to none.

Answer 2

Here's a better way:

var failMessage = $('<div class="failMessage" />');
failMessage.text('SOME FAIL TEXT HERE');
//Create the failMessage beforehand

$("#help")
    .slideUp(function() {
        $(this).before(failMessage);
    })
    .delay(5000)
    .slideDown(function () {
        failMessage.hide();
    }​);​