Swap two Divs out at once and swap them for a different two and keep looping for a set amount of seconds

Question

I have been developing a function and its doing kinda what I want it to do as shown above but am having an issue with it swapping two divs out at once and replacing with a different two, Anyone point me in the right direction am not sure how to go about this, Below is what I have got so far:

$(function () {

var counter = 0,
    divs = $('#budgetSpent,#budgetTitle,#staticBudget,#staticTitle');

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
}, 5 * 1000); // do this every 10 seconds

});

Short Description: So pretty much I have two counters, every 10 seconds the div is displayed and the rest are hidden, now It does swap, but the two div ids with title beside them, i cant get them to swap along with there respective counters so say for example: £0000 Budget1 (Displays for 10 seconds) then swaps to £11111 Budget2 and it should run in a loop, So far the 4 divs listed keep swapping one by one every setInterval But I need to show and hide 2 divs at a time rather than one by one

Not sure why I got down voted... I have attempted tackle the problem. — Studento919, Nov 29 '13 at 14:38
Not sure neither, but I read this a couple of times and I don't understand the swapping thing or actually what you are trying to do — Brewal, Nov 29 '13 at 14:39
So pretty much I have two counters, every 10 seconds the div is displayed and the rest are hidden, now It does swap, but the two div ids with title beside them, i cant get them to swap along with there respective counters so say for example: £0000 Budget1 (Displays for 10 seconds) then swaps to £11111 Budget2 and it should go back and forth ill add this above to try and give a better overview, does that help at all? Each time a Div shows the rest are hidden. — Studento919, Nov 29 '13 at 14:43
http://jsfiddle.net/A8R7T/ Am in work so i cant see if thats working in jsFiddle ave never really used it! Its something along these lines here; http://stackoverflow.com/questions/914951/show-and-hide-divs-at-a-specific-time-interval-using-jquery Only it changes two rather one at a time — Studento919, Nov 29 '13 at 14:48
The input on the top right is for CSS, and you have to include the jquery lib. This is a working one but you have to put your css : http://jsfiddle.net/A8R7T/1/ — Brewal, Nov 29 '13 at 14:51
http://jsfiddle.net/A8R7T/2/ Sorry am a bit of a noob :( is the div's swapping for you? One at a time? — Studento919, Nov 29 '13 at 14:53
Sorry, I really don't get anything of this. Try to make your question more simple, provide a working example clearly showing your problem. It could be done with paint if you want. "What I am trying to do... What I have done so far... What issue I am facing...". And please, don't put irrevelent code (too much html, useless css, ...) — Brewal, Nov 29 '13 at 15:02
I cant upload images due to rep, This:divs = $('#budgetSpent,#budgetTitle,#budgetSpent,#budgetTitle'); they all swap one by one while hiding the other divs I need to swap #budgetSpent,#budgetTitle and #budgetSpent,#budgetTitle out at the same time in a loop that just swap every 5 seconds:setInterval(function () { showDiv(); // show next div }, 5 * 1000); // do this every 10 seconds — Studento919, Nov 29 '13 at 15:11
they only swap one by one at the moment, I Dont see how I could make that much easier to understand — Studento919, Nov 29 '13 at 15:11
While making your code simpler, I saw that you don't have a `#budgetTitle` div but you have a `#spentTitle` div ? — Brewal, Nov 29 '13 at 15:19
Apologies, so now they all swap one by on, do you understand what am trying to do by showing the two divs at once then hiding the rest but just putting that cycle on a constant loop, also please note am still quite young and in uni trying to improve where I can and yes the CSS is completely useless and the HTML there is too much of it but am still learning the basics — Studento919, Nov 29 '13 at 15:22
That's a good reason to keep it simple ;) I'm working on... Wait a minute — Brewal, Nov 29 '13 at 15:25
I have been told that already, University am at isn't very good at teaching it like that either No problem :) — Studento919, Nov 29 '13 at 15:26
The divs dont swap at all anymore when I implemented that, do i not need to list all the div id's here $('div').toggleClass('hide', 200); but is that going to swap staticTitle div staticBudget div at the same time? What I had before was working but only for single div's, i need it to do it 2 at a time I am so close to getting! Oh the code worked and displayed my values correctly as the code i used before didnt, it just doesnt hide or show divs — Studento919, Nov 29 '13 at 15:41
that's because you have to give your divs (not all but only 2) the `hide` class and put this CSS line : `.hide {display: none}` — Brewal, Nov 29 '13 at 15:46
function swapDivs () { $('budgetTitle','budgetSpent').toggleClass('hide', 200); } This is what I have now, it still doesn't change anything, am obviously so dumb am missing something here also inserted as such: — Studento919, Nov 29 '13 at 15:51

Brewal · Accepted Answer · 2013-11-29T16:02:27.067

First, you have to keep your code simple. Especially when asking for something on SO. We don't want to know what's in your divs, but we just need they HTML markup :

<div id='budgetTitle'>budgetTitle div</div>
<div id='staticBudget'>staticBudget div</div>
<div id='staticTitle'>staticTitle div</div>
<div id='budgetSpent'>BudgetSpent div</div>

This is far cleaner and quick to debug. Then, you shouldn't use ids here but a specific class to show/hide them :

<div id='budgetTitle'>budgetTitle div</div>
<div id='staticBudget' class="hide">staticBudget div</div>
<div id='staticTitle'>staticTitle div</div>
<div id='budgetSpent' class="hide">BudgetSpent div</div>

The CSS code for this hidding the divs :

div.hide {display: none;}

Now you will see only the #budgetTitle and #staticTitle divs. Well, now let's go for the "swapping" part :
All you need is to give the other divs the .hide class and remove this class from the others. There's a jQuery method for this : jQuery.toggleClass()

Now you only have to do this to swap the divs :

// This will give all divs that don't have the "hide" class the class "hide"
// and remove the class "hide" from all divs that have the "hide" class 
$('div').toggleClass('hide');

The final code :

function swapDivs () {
    $('div').toggleClass('hide');
}

$(function () {
   setInterval(
       function () {
           swapDivs(); // show next div
       },
       3 * 1000
    ); // do this every 3 seconds    
});

The Demo jsFiddle

If you have other divs in your code that you don't want to toggle, you should add a toggle class to those four divs :

<div id='budgetTitle' class="toggle">budgetTitle div</div>
<div id='staticBudget' class="toggle hide">staticBudget div</div>
<div id='staticTitle' class="toggle">staticTitle div</div>
<div id='budgetSpent' class="toggle hide">BudgetSpent div</div>

And then just make a few changes in the js :

function swapDivs () {
    $('div.toggle').toggleClass('hide');
}

If you can't manage to make it work, try to restart from scratch (without your javascript, css and html) and then try to add your own html code inside the divs.

Nice answer, +1. But maybe you should add a class to toggling divs in order not to hide every div on his page. — OlivierH, Nov 29 '13 at 16:01
In this case there was just the four div directly in the body. But yes, you are right. I'll make a small edit — Brewal, Nov 29 '13 at 16:03
Its is a really nice answer and I See what your trying to do am just fiddling with it now to get it to work thanks :) — Studento919, Nov 29 '13 at 16:10

Swap two Divs out at once and swap them for a different two and keep looping for a set amount of seconds

1 Answers1