2

Consider the following HTML:

<body>
    <div id="div1" onclick="toggleDivs();">
        div1 content
    </div>
    <div id="div2" onclick="toggleDivs();" style="visibility:hidden">
        div2 content
    </div>
</body>

What I want is that when the user clicks on the currently visible div, the other div will become visible and the current div will become hidden.

I tried using jquery.toggle() and jquery.css("visibility":"hidden/visible") but none of those techniques worked.

3 Answers 3

5

toggle[API Ref] will work, but it operates on the display CSS attribute, not visibility. Just use display instead:

<div id="div1" onclick="toggleDivs();">
    div1 content
</div>
<div id="div2" onclick="toggleDivs();" style="display: none;">
    div2 content
</div>​

And the script:

function toggleDivs() {
    $('#div1, #div2').toggle();
}​

Here's a working example.


Addendum:

I don't care for this solution compared to the previous one as much, but if, as per the OP's comment below, you wanted to accomplish this task using the z-index, you could do it like this:

HTML:

<div id="div1" class="cycle">
    div1 content
</div>
<div id="div2" class="cycle">
    div2 content
</div>

CSS:

.cycle {
    position: absolute; /* The important thing is that the element 
                           is taken out of the document flow */
    background: #fff;
    width: 100px;
    height: 20px;
    border: solid 1px #000;
}​

JavaScript:

$(function() {
   var cycleClick = function(e) {
        var $cycle = $('.cycle');
        $cycle.each(function() {
            var $this = $(this);
            var newZIndex = ($this.css('z-index') + 1) % $cycle.length;
            $this.css('z-index', newZIndex);
        });
        return false;
    };

    $('.cycle').click(cycleClick).each(function(idx) {
        $(this).css('z-index', idx);
    });​
});
5
  • can you give me an example using z-index?
    – programmer
    May 16, 2012 at 17:03
  • Why do you need an example using z-index? Just curious. May 16, 2012 at 17:07
  • because i know it can be done using z-index, and was wondering about the implementation differences on the css side..
    – programmer
    May 16, 2012 at 17:12
  • 2
    See my addendum. A z-index solution requires more scripting and more styling, but you're right that it can be done. May 16, 2012 at 17:32
  • I posted a much simpler z-index solution.
    – lucuma
    May 17, 2012 at 17:52
3

Here's a jsfiddle that works:

http://jsfiddle.net/g5chb/1/

Amended code below:

<body>
    <div id="div1" >
         div1 content
    </div>
    <div id="div2" style="display:none">
         div2 content
    </div>
</body>​

and the relevant jQuery:

$("div").click(function(){
  $("#div1").toggle();   
  $("#div2").toggle();                    
});
1
  • 1
    It can be done in one line as well: $("#div1,#div2").toggle();
    – lucuma
    May 17, 2012 at 17:45
1

A much simpler z-index solution is to just subtract 1 from the visible z-index. You just need to put the div's on the page in reverse order.

$('.cycle').click(function() {
    $(this).css('z-index', $(this).css('z-index')-1);
});
​

JSFiddle: http://jsfiddle.net/lucuma/jr7tR/3/

1
  • Please note the z-index solutions require a background to make sure the divs below aren't visible.
    – lucuma
    May 17, 2012 at 18:05

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.