set timer to slidedown and the button change after slideup

Question

What should I put as after I surf the website and in 3 seconds later the ads will slide down from the top of the webpage, and the button name on that div will change to 'hide'. And after we click hide button, the ads will slide up and the button name back again to 'show'.

It's working for sliding down and sliding up and also the button HIDE and SHOW change successfully. But after the button changed back to 'SHOW' again. I clicked 'SHOW' button but it wont change back to 'HIDE'. and also i didn't set timer to slide down. because I don't know what to put as I can't find any answer on other questions.

This is my script for JavaScript and jQuery

$(document).ready(function () {
    $(".showAds").click(function () {
    $("#ads").slideToggle("slow");
    $('a#showLink').text('SHOW');
     });
});

This is what I want to show and hide

<div id="top">
    <div id="adsBox">
         <div id="ads"> <img src="assets/images/ads.jpg" alt="ads"> </div>
         <p> <a href="#" id="showLink" class="showAds">HIDE</a> </p>
    </div>
</div>

And this is my CSS

#adsBox { display:none };

and also i tried something like this. And it's still not working too.

$(".showAds").click(function () {
    $("#ads").slideUp("slow");
    $('a#showLink').text('SHOW');
    $("#ads").slideDown("slow");
    $('a#showLink').text('HIDE');
});

I know my coding is quite messy. Please guide me to the right direction. And sorry for my bad english. Thanks.

Answer 1

The button label isn't changing back because, in short, you haven't told it to. Your call to slideToggle() switches the visibility of the element back and forth, but your call to .text("SHOW") only does one thing...sets the text to 'SHOW', every time.

Try something like this:

$(".showAds").click(function () {
   $("#ads").slideToggle("slow");
   $('a#showLink').text(text == "SHOW" ? "HIDE" : "SHOW");
});

Which is to say - 'if the text is SHOW, set it to HIDE. If not, set it to SHOW'.

For your timer, use setTimeout() :

setTimeout(function(){ $("ads").slideToggle("slow");}, 3000);