Show and hide divs at a specific time interval using jQuery

Question

I would like to show divs at a specific interval (10 seconds) and show next div and as go on and repeat the same.

**

Sequence :

** On 10th second show div1 , hide other divs ,
After 5seconds interval Show div 2 and hide other divs,
After 5 seconds interval Show div 3 and hide other divs,
and repeat the same for every 10 seconds.

Code Follows:

<div id='div1' style="display:none;"> 
  <!-- content -->
</div>

<div id='div2' style="display:none;"> 
  <!-- content -->
</div>

<div id='div3' style="display:none;"> 
  <!-- content -->
</div>

score 34 · Accepted Answer · edited Jul 23 '19 at 05:03

34

Working Example here - add /edit to the URL to play with the code

You just need to use JavaScript setInterval function

$('html').addClass('js');

$(function() {

  var timer = setInterval(showDiv, 5000);

  var counter = 0;

  function showDiv() {
    if (counter == 0) {
      counter++;
      return;
    }

    $('div', '#container')
      .stop()
      .hide()
      .filter(function() {
        return this.id.match('div' + counter);
      })
      .show('fast');
    counter == 3 ? counter = 0 : counter++;

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <title>Sandbox</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen">
    body {
      background-color: #fff;
      font: 16px Helvetica, Arial;
      color: #000;
    }
    
    .display {
      width: 300px;
      height: 200px;
      border: 2px solid #000;
    }
    
    .js .display {
      display: none;
    }
  </style>
</head>

<body>
  <h2>Example of using setInterval to trigger display of Div</h2>
  <p>The first div will display after 10 seconds...</p>
  <div id='container'>
    <div id='div1' class='display' style="background-color: red;">
      div1
    </div>
    <div id='div2' class='display' style="background-color: green;">
      div2
    </div>
    <div id='div3' class='display' style="background-color: blue;">
      div3
    </div>
    <div>
</body>

</html>

EDIT:

In response to your comment about the container div, just modify this

$('div','#container')

to this

$('#div1, #div2, #div3')

edited Jul 23 '19 at 05:03

Akshay Mulgavkar

1,727
9
22

answered May 27 '09 at 10:29

Russ Cam

124,184
33
204
266

Russ Thanks for the quick reply to the post. In your example it shows we need to have a div container and in to that we need to have other divs.. But my divs are not inside to an container its seperate. how to modify the code accordingly ? – Webrsk May 27 '09 at 10:40
do you have access to modify the HTML? If so, I would suggest wrapping the divs in a container div for context and ease of selection. Without a container div, the code would need to be modified to select only those divs in question i.e. divs with ids 1, 2 and 3. I'll update my answer now – Russ Cam May 27 '09 at 10:44
Ya makes sense i can have it in a container div for better clarity. Russ tell me can we show another div (named : div_sub1) at the time of displaying div1 and subsequently.Will the same code can be resued ? – Webrsk May 27 '09 at 11:18
Sure. There's a number of ways of tackling that scenario, you could use an attribute match on the id to show div_sub1 at the same time as div1, you could chain it onto the visibility of div1, to name a couple of solutions. – Russ Cam May 27 '09 at 11:23
P.S. I have also provide a solution to your other question using an anchor to toggle showing different divs - http://stackoverflow.com/questions/914558/using-jquery-how-to-show-and-hide-different-divs-onclick-event/914793#914793 – Russ Cam May 27 '09 at 11:37
Russ for an understanding can you explain what this line does .filter( function() { return this.id.match('div' + counter); }) Thanks. – Webrsk May 27 '09 at 11:37
the $('div','#container') selector selects all divs in the context of the element with container id. Then all of the matched elements are hidden, then we want to filter the matched elements to only elements whose id matches 'div' + the value of counter (in this case, only one element will match) and then show the filtered elements – Russ Cam May 27 '09 at 12:12
1

Hi. I can't uderstand ther is can i change initial time 10s? I have the same case but i need to show 1 Div at the start – Alexandru Florea Jan 24 '14 at 13:31

score 23 · Answer 2 · answered May 27 '09 at 10:38

Loop through divs every 10 seconds.

$(function () {

    var counter = 0,
        divs = $('#div1, #div2, #div3');

    function showDiv () {
        divs.hide() // hide all divs
            .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
            .show('fast'); // and show it

        counter++;
    }; // function to loop through divs and show correct div

    showDiv(); // show first div    

    setInterval(function () {
        showDiv(); // show next div
    }, 10 * 1000); // do this every 10 seconds    

});

is there a way to change the layout to, show div1 then show div2 and still show div1 at the same time. So when div2 comes it shows div1 and div2? — Ewald Bos, Sep 14 '15 at 18:19

score 8 · Answer 3 · answered May 27 '09 at 10:39

here is a jQuery plugin I came up with:

$.fn.cycle = function(timeout){
    var $all_elem = $(this)

    show_cycle_elem = function(index){
        if(index == $all_elem.length) return; //you can make it start-over, if you want
        $all_elem.hide().eq(index).fadeIn()
        setTimeout(function(){show_cycle_elem(++index)}, timeout);
    }
    show_cycle_elem(0);
}

You need to have a common classname for all the divs you wan to cycle, use it like this:

$("div.cycleme").cycle(5000)

score 5 · Answer 4 · edited Sep 23 '13 at 09:51

See InnerFade.

<script type="text/javascript">
    $(document).ready(

    function() {
        $('#portfolio').innerfade({
            speed: 'slow',
            timeout: 10000,
            type: 'sequence',
            containerheight: '220px'
        });
    });
</script>
<ul id="portfolio">
    <li>
        <a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
        <img src="images/ggbg.gif" alt="Good Guy bad Guy" />
        </a>
    </li>
    <li>
        <a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
        <img src="images/whizzkids.gif" alt="Whizzkids" />
        </a>
    </li>
    <li>
        <a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html">
        <img src="images/km.jpg" alt="Königin Mutter" />
        </a>
    </li>
    <li>
        <a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html">
        <img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />
        </a>
    </li>
    <li>
        <a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html">
        <img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" />
        </a>
    </li>
</ul>

pat · Answer 5 · 2016-03-03T13:02:33.523

Heres a another take on this problem, using recursion and without using mutable variables. Also, im not using setInterval so theres no cleanup that has to be done.

Having this HTML

<section id="testimonials">
    <h2>My testimonial spinner</h2>
    <div class="testimonial">
      <p>First content</p>
    </div>
    <div class="testimonial">
      <p>Second content</p>
    </div>
    <div class="testimonial">
       <p>Third content</p>
    </div>
</section>

Using ES2016

Here you call the function recursively and update the arguments.

  const testimonials = $('#testimonials')
      .children()
      .filter('div.testimonial');

  const showTestimonial = index => {

    testimonials.hide();
    $(testimonials[index]).fadeIn();

    return index === testimonials.length
      ? showTestimonial(0)
      : setTimeout(() => { showTestimonial(index + 1); }, 10000);
   }

showTestimonial(0); // id of the first element you want to show.

score 0 · Answer 6 · edited Nov 09 '13 at 14:33

0

Try this

      $('document').ready(function(){
         window.setTimeout('test()',time in milliseconds);
      });

      function test(){

      $('#divid').hide();

      }

edited Nov 09 '13 at 14:33

zzlalani

22,960
16
44
73

answered Oct 24 '13 at 07:42

jool

1

Show and hide divs at a specific time interval using jQuery

6 Answers6

Linked

Related