0

I have 2 divs. I want div id 1 to be visible when the page is loaded and when i click on anywhere in main div id 2 should be visible.when user click again on main 2 should be hidden and 1 visible.`

<div id="main" style="border:1 px dashed red;" >
  <div id="1" style="width:300px;height:50px; ">div One visible</div>
  <div id="2" style="width:300px;height:50px; ">div two visible</div>
</div>

How do i get it done using Jquery? i am not sure how to get the toggling effect

Thanks

1

4 Answers 4

4

Easy peasy.

$(function ()
{
    var $main = $('#main'),
        $1 = $('#1'),
        $2 = $('#2');
    
    $2.hide(); // hide div#2 when the page is loaded
    
    $main.click(function ()
    {
        $1.toggle();
        $2.toggle();
    });
});

jsfiddle demo →


Edit

OP Comment: "Is there anyway i can keep track of which div is visible?"

There certainly is; it depends on how you want to use it. You can manually maintain a flag:

$(function ()
{
    var $main = $('#main'),
        $1 = $('#1'),
        $2 = $('#2'),
        $visible;
    
    $2.hide(); // hide div#2 when the page is loaded
    $visible = $1;
    
    $main.click(function ()
    {
        $1.toggle();
        $2.toggle();
        $visible = ($visible === $1 ? $2 : $1);
    });
});

Or you can just write a function that figures it out for you:

$(function ()
{
    var $main = $('#main'),
        $1 = $('#1'),
        $2 = $('#2');
    
    $2.hide(); // hide div#2 when the page is loaded
    
    $main.click(function ()
    {
        $1.toggle();
        $2.toggle();
    });
    
    
    function whichIsVisible()
    {
        if (!$1.is(':hidden')) return $1;
        if (!$2.is(':hidden')) return $2;
    }
});

As jAndy points out, this function can be written in a more concise/terse form:

function whichIsVisible()
{
    return $1.add($2).filter(':visible');
}

However, it is semantically different from the first version. The first version returns one of:

  • $1
  • $2
  • undefined

while jAndy's version returns one of:

  • $1
  • $2
  • $1.add($2), a two-element jQuery object
  • $(), an empty jQuery object

So they're not strictly equivalent.

4
  • @Matt, is there anyway i can keep track of which div is visible.
    – Prady
    Jan 19, 2011 at 17:07
  • In general it's very good to cache DOM references, but for a one-time access it's useless anyway.
    – jAndy
    Jan 19, 2011 at 17:08
  • MattBall: return $1.add($2).filter(':visible');
    – jAndy
    Jan 19, 2011 at 17:18
  • @jAndy: that's definitely more concise. I'll add that in.
    – Matt Ball
    Jan 19, 2011 at 17:19
4

Sounds like

HTML

<div id="main" style="border:1 px dashed red;" >
   <div id="1" style="width:300px;height:50px; ">div One visible</div>
   <div id="2" style="width:300px;height:50px;display:none; ">div two visible</div>
</div>

JS

$(function() {
    $('#main').click(function() {
       $('#1, #2').toggle();
    });
});

Demo: http://www.jsfiddle.net/4yUqL/74/

1
  • @MattBall: So +.5 for speed, and +.5 for cleanly-ness. Unfortunately my scale uses floor(), thus I can't award you any points... [jk ;p] Jan 19, 2011 at 16:54
1
$(function(){
    // start out hiding the second
    $('#2').hide();

    // when they click the main div
    $('#main').click(function(){
        // make one hide and the other show.
        $('#1,#2').toggle();
    });
});

Should do the trick. Working example: http://www.jsfiddle.net/bradchristie/3XznV/1/ (Excuse the red background, wanted to see where to click. ;-)

EDIT: Fixed your style sheet (border) so the "1"&"px" have no space. ;-)

1
  • +1 for degradation, if js is not enabled, hidden div will not be inaccessable Jan 19, 2011 at 16:50
0

Working example posted at http://jsfiddle.net/y8uwt/

HTML:

<div id="main" style="border:1 px dashed red;" >
  <div id="1" style="width:300px;height:50px; ">div One visible</div>
  <div id="2" style="display:none;width:300px;height:50px; ">div two visible</div>
</div>

<a href="#" id="button">click</a>

JS:

$(document).ready(function() {
    $("#button").click(function(event) {
        $("#1").toggle();
        $("#2").toggle();
    })
});

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.