JavaScript toggle divs

Question

I want to toggle between 3 divs. Unfortunately it only works for 2 divs.

My code (for two divs):

$(function() {
  $('#playerbargreen').hide();
  $('#playerbaroff,#playerbargreen').click(function() {
    $('#playerbargreen,#playerbaroff').toggle();
  });
});

The end result must be:

show first div --> click --> hide first div and show second div --> Click --> hide second div and show third div

Has someone any idea? Thanks in advance!

"first div --> click --> second div --> Click --> third div" - this is not toggling — Nir Alfasi, Dec 04 '17 at 17:55
Is it only supposed to work one way or does it need to be reversible by going from the 3rd Div back to the 2nd (or 1st)? — melkisadek, Dec 04 '17 at 17:58
If it's only one way then you don't need to toggle anything. That switches back and forth. You just need to use `hide` and `show` from the `on click` events for each Div. — melkisadek, Dec 04 '17 at 18:02
This is, still, not a description of "toggle" :) toggling has only 2 modes (like binary) on and off. Here you have 3 modes. — Nir Alfasi, Dec 04 '17 at 18:02

score 0 · Answer 1 · answered Dec 04 '17 at 18:09

0

Start with Div 2 & Div 3 hidden.

Create an on click event for Div 1 which hides Div 1 and shows Div 2.

Repeat for Div 2 to Div 3.

Something simple like the following should suffice:

$('#Div1').click(function() {
    $('#Div1').hide();
    $('#Div2').show();
});

$('#Div2').click(function() {
    $('#Div2').hide();
    $('#Div3').show();
});

answered Dec 04 '17 at 18:09

melkisadek

1,043
1
14
33

Thank you so much for your code. I fixed my 'problem' by adding "style="display: none;" to my div. – user3130478 Dec 04 '17 at 18:29

score 0 · Accepted Answer · answered Dec 04 '17 at 18:28

You can try something like this

$('#Div2').hide();
$('#Div3').hide();

$('#Div1').click(function() {
    $('#Div1').hide();
    $('#Div2').show();
});

$('#Div2').click(function() {
    $('#Div2').hide();
    $('#Div3').show();
});

div{
width:100px;
height:100px;
background-color:green;
color:white;
text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Div1">div1</div>
<div id="Div2">div2</div>
<div id="Div3">div3</div>

Thank you so much, this was the solution! – user3130478 Dec 04 '17 at 20:34 — user3130478, Dec 04 '17 at 20:34

JavaScript toggle divs

2 Answers2