Clever Geek Handbook

Toggle the visibility of three or more sections

I have a simple script that toggles the visibility of two divs:

<script type='text/javascript'>
    $(window).load(function(){
        function toggle_contents() {
            $('#page1').toggle();
            $('#page2').toggle();
            setTimeout(function(){
                toggle_contents()
            }, 25000)
        }
        toggle_contents();
    });
</script>

<div id="container">
    <div id="page1">This is page 1 contents.</div>
    <div id="page2" style="display:none;">This is page 2 contents.</div>
</div>

It works great, but I can't figure out how to add more divs to the mix.

http://jsfiddle.net/mxwv85px/1/

Any help is greatly appreciated ...

+3


source to share


6 answers


To loop through a set of divs, you can use the class in the active div

and use next

to move through each iteration. Something like that:

function toggle_contents() {
    var $active = $('#container .active');
    if ($active.length && $active.next().length) {
        $active.hide().removeClass('active').next().show().addClass('active');
    }
    else {
        $('.active').hide();
        $('#container div:first').show().addClass('active');
    }

    setTimeout(toggle_contents, 3000)
}
toggle_contents();


Updated script

+3


source


.toggle () means the div toggles between hidden and displayed. I would suggest using .hide () and .show () instead, as this gives you more control over what content you want to display or not. However, the downside is that you need code that has many more lines. Give me a second while I try to do something for you.

Currently you can only have 2 divs, because the .toggle () function can only have 2 values, which means the third div will have the same value as the other div, causing it to be visible or hidden, while while the other div also.



The code given in this answer from @Rory McCrossan already works, so I'll stop trying to code it myself: fooobar.com/questions/2184410 / ...

+2


source


You can scroll through selected items and only show one call

var page=0;
function toggle_contents() {
    $('.page').hide();
    var array = $('.page').toArray();
    $(array[page]).show(); 
    page=++page%array.length;
    setTimeout(function(){toggle_contents()}, 3000)
}
toggle_contents();

http://jsfiddle.net/mxwv85px/9/

+1


source


You can do it

http://jsfiddle.net/mxwv85px/13/

Code

<div id="container">
<div id="page1">This is page 1 contents.</div>
<div id="page2" style="display:none;">This is page 2 contents.</div>
<div id="page3" style="display:none;">This is page 3 contents.</div>
<div id="page4" style="display:none;">This is page 4 contents.</div>
<div id="page5" style="display:none;">This is page 5 contents.</div>

      

        
        
        
      

    

function toggle_contents() {
var items = $('#container div');

for(var i= 0; i < items.length; i++)
{
    if($(items[i]).is(":visible")) {
        $(items[i]).hide();
        i + 1 == items.length ? $(items[0]).show() : $(items[i+1]).show();
        break;
    }        

}

setTimeout(function(){ toggle_contents() }, 500)
}

toggle_contents();
+1


source


First of all, supply a timer from the toggle_contents function. Second, add divs to the generic class, cache them and work with variable cache

$(window).load(function(){
  var divs = $('.some-class');
  function toggle_contents() {
    divs.toggle();
  }
  setTimeout(function(){
    toggle_contents()
  }, 25000)

});
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-class">
  
</div>

<div class="some-class">
  
</div>

<div class="some-class">
  
</div>
Run code


+1


source


To add more divs you can use .append like:

$('#container').append('<div id="page3">This is page 3 contents</div>');
-2


source






More articles:


All Articles