Question

I am using the below code to toggle a div on my main web page:

$(document).ready(function() {

    window.setTimeout(function() {
        if ($("div[id='feature-content']").is(":visible")) {
            $("div[id='feature-content']").hide();
            $("div[id='feature-content']").slideToggle(9000).delay(4000);
        }

        $("div[id='feature-content']").slideToggle(9000).delay(4000);
    }
    ,
    5000
    );      
});     

With the above code the following happens:

• The div “feature-content” appears immediately once the page is rendered (DOM is ready)
• It stays visible for 5 secs,
• then disappears
• then toggling starts.

What I want to achieve is:

• The div “feature-content” should be hidden when the page is rendered.
• After 5 secs, the toggling should begin.

I tried to add the css style “display:hidden” to the div, but to no avail. Any ideas?

Thank you.

Answer 1

The part after “the following happens” is exactly what I think should happen, from inspecting the code. Try just this:

  $(document).ready(function() {
      $("div[id='feature-content']").hide().delay(5000).slideToggle(9000);
  });

EDIT I think the OP wants it to pause, slide into view, pause, then slide out of view, which would be this:

  $(document).ready(function() {
      $("div[id='feature-content']").hide().delay(5000).slideToggle().delay(9000).slideToggle();
  });