5

I would like to show a div based on the Onclick event of an link.

First Click - Show div1
Second Click - Hide remaining div's and Show div2
Third Click - Hide remaining div's and show div3
Fourth Click - Hide remaining div's and show div1 => repeat the loop and goes on..

Code Follows:

<div class="toggle_button">
      <a href="javascript:void(0);" id="toggle_value">Toggle</a>
</div>


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

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

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

Jquery Code :

$(document).ready(function() {
        $("#toggle_value").click(function(){
           $("#div1").show("fast");
           $("#div2").show("fast");
           $("#div3").show("fast");
        });
});

The above code shows all divs on first click itself but it should show div1 on first click as mentioned.

12 Answers 12

5

I'll try my shot.


EDIT: After second though, to avoid global variable use it's better to do the following

$(document).ready(function() {
        $("#toggle_value").click((function(){
        var counter = 0;
        return function()
        {
           $("#div" + counter).hide("fast");
           counter = (counter % 3) + 1;
           $("#div" + counter).show("fast");
        }
        })());
});
8
  • Hmm... that's interesting. But on 4th click it hides all div and it on 5th click it shows the div1 again.Missing any cases ?!
    – Webrsk
    May 27, 2009 at 8:49
  • I've missed the point it have to iterate all the time. Fixed. May 27, 2009 at 8:55
  • Artem while it was works fine when the var is global, after i tried the recent posted code it stops working ..
    – Webrsk
    May 27, 2009 at 9:17
  • This assumes that "#div" + counter is actually the next div to show. This is the exact same constraint you criticize in my answer. You rely on predictable names, I rely on document order. Where is the difference?
    – Tomalak
    May 27, 2009 at 9:34
  • @Tomalak: First of all it's was described in the question. And second it could be easily changed to use the mapping array of strings with divs names. While your solution is for more narrow case. @Webrsk: Thanks for pointing to mistake. Has been fixed. And for those who loves to downvote, please be kind and explain yourself, I can understand down voting of completely unhelpful answer but what was wrong here? May 27, 2009 at 10:08
1

You should add a counter in the function.

$(document).ready(function() {
    var count = 0;

    $("#toggle_value").click(function(){
        if (count == 0) {
            $("#div1").show("fast");
            $('#div2').hide();
            count++;
        }
        else if (count == 1) {
            $("#div2").show("fast");
            ...
            count++;
        }
        else if (count == 2) {
            $("#div3").show("fast");
            ....
            count++;
        }
        else {
             $('div').hide();
             count=0;
        }
    });
});
3
  • that last else-statement should probably also show the first div, as he wants it to loop.
    – peirix
    May 27, 2009 at 8:27
  • Thanks Peter . And as peirix mentioned ya it need to show the first div as a loop.But in that 4th click it will hide all divs rather than showing the first div.
    – Webrsk
    May 27, 2009 at 9:07
  • This is one of the different solution and will work if we change the else case to $('#div2').hide(); $("#div").show("fast"); $('#div1').hide(); count=1;
    – Webrsk
    May 27, 2009 at 10:21
1

How about this

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

$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing'

$(function() {

  var counter = 1;

  $('#toggle_value').click(function() {
    $('div','#container')
      // to stop current animations - clicking really fast could originally
      // cause more than one div to show 
      .stop() 
      // hide all divs in the container
      .hide() 
      // filter to only the div in question
      .filter( function() { return this.id.match('div' + counter); })
      // show the div 
      .show('fast');

    // increment counter or reset to 1 if counter equals 3
    counter == 3? counter = 1 : counter++; 

    // prevent default anchor click event
    return false; 

  });

});

and HTML

<!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>Div Example</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>
<div class="toggle_button">
      <a href="#" id="toggle_value">Toggle</a>
</div>
<br/>
<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>

This could easily be wrapped up in a plugin

0

A simple way would be to introduce a variable that tracked clicks, so something like this:

var tracker = 0;    
$(document).ready(function() {
    $("#toggle_value").click(function(){
       if(tracker == 0)
       {
          $("#div1").show("fast");
       }else if(tracker ==1)

       etc etc

       tracker ++;

    });
});
0

My solution is a little different - I'd do it dependant on the state of the divs at the current time (on click). See below for what I mean by this.

$(document).ready(function() {
    $("#toggle_value").click(function(){
       if ($("#div1).is(':visible')) { // Second click
            // Hide all divs and show d2
            $("#div1").hide();
            $("#div2").show("fast");
            $("#div3").hide();
            $("#div4").hide();
       } else if ($("#div2").is(':visible')) { // Third click
            // follow above example for hiding all and showing div3
       } else if ($("#div3").is(':visible')) { // Fouth click
            // follow above example for hiding all and showing div1
       } else { // first click
            // All divs should be hidden first. Show div1 only.
            $("#div1").show("fast");
       }
    });
});

Just to warn you - I have not tested this code :) Based upon the following for determining visibility: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F

Hope it helps

2
  • 1
    Don't hard code something that can be dynamic. What if you want to change this code to incorporate 100 divs? Are you going to code 400 lines of confusing ifs and repeated code? May 27, 2009 at 9:14
  • Well that'd be a different question, and not what was asked. I took it more to mean that there were only the 3 divs, and the div names would not normally be numbered and may be actual names. I take your point however. May 27, 2009 at 9:24
0

I prefer to use "filter" method and make a little easier work with counter:

(function () {
    var divCounter = 0, divs;

    $(function () {
        divs = $('#div1, #div2, #div3');
        $('#toggle_value').click(function (e) {
            divs.hide() // hide other divs
                .filter(function (index) { return index == divCounter % 3; }) // select appropriate div
                .show('fast'); // and show it

            divCounter++;
        });
    });

})();
0

I would probably do something like: (The following assumes all your <div>s are in a container with id "container")

$(document).ready(function() {
  var $allDivs = $("#container > div");
  var counter = 0;

  $("#container > div").click(function(){
    counter = counter < $allDivs.length - 1 ? counter + 1 : 0;
    $allDivs.not(":eq("+counter +")").hide("fast");
    $allDivs.eq(counter).show("fast");
  });
});
10
  • here you make very strong assumption that div's is ordered in container according to id number, which might be false in general May 27, 2009 at 8:48
  • don't you think there is more divs in the container than described? May 27, 2009 at 8:56
  • Thinking about it, your are right. On the other hand, if they are to be shown sequentially in a particular order, why not lay them out in that particular order right away? Instead of creating "ordered" id attributes for an unordered set of elements.
    – Tomalak
    May 27, 2009 at 8:59
  • It could some design constraint. May 27, 2009 at 9:03
  • Could be. OTOH, most of the time you are writing JavaScript, you also have control over the HTML generation process. Ordering the divs the proper way should be not too complicated, and the question implies they already are. Well... if this is not possible, the above solution does, admittedly, not work.
    – Tomalak
    May 27, 2009 at 9:05
0

The .toggle function in jQuery takes any number of argument functions, so the problem is already solved. See the docs under Events.

0
$("#toggle_value").click(function()
{
   $("#div" + (++c) % 3).show().siblings().hide();        
}
3
  • and what if those divs are not siblings? May 27, 2009 at 9:16
  • They are in the example. Its like saying what if they are not on the same page? What if they are text boxes. What if you are running this on the iPhone? May 27, 2009 at 9:24
  • Funny O_o. In the example you have the shorten code sample, which I believe in real much more complicated in general, so by your code you will hide all sibling no matter what. May 27, 2009 at 10:16
0
var c = 1;
$("#toggle_value").click(function()
{
   $("#div" + c).hide("fast");        
   $("#div" + ++c).show("fast");
   if (c > 3) c=1;       
});
1
  • Thanks for posting it. Just fixed the syntax error of the code which you posted and tried. var c = 1; $("#toggle_value").click(function(){ $("#div" + c).hide("fast"); if (c > 3) c=1; $("#div" + c++).show("fast"); }); First 3 clicks works fine after that it shows 2 divs at same time...
    – Webrsk
    May 27, 2009 at 8:58
0

First You have to add query basic file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Then you have to add the following code:

<script type="text/javascript">
    $(document).ready(function () {
        $("#hide").click(function(){
            $(".slider_area").hide(1000);
            $("#show").css("display","block");
            $("#hide").css("display","none");
        });
        $("#show").click(function(){
            $(".slider_area").show(1000);
            $("#show").css("display","none");
            $("#hide").css("display","block");
        });
    });
</script>

Add the code above into the header portion and the code below in the body portion.

<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />

The code is ready for the different image click for show and hide div.

0
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
    if (temp1 == 0)  {
        $('#' + temp).hide();
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 1;
        }
        else{
        $('#' + temp).hide();   
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 0;
        }
});
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.