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

Prady
  • 10,978
  • 39
  • 124
  • 176

4 Answers4

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.

Community
  • 1
  • 1
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
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/

jAndy
  • 231,737
  • 57
  • 305
  • 359
  • @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] – Brad Christie Jan 19 '11 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. ;-)

Brad Christie
  • 100,477
  • 16
  • 156
  • 200
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();
    })
});
Kyle Wild
  • 8,845
  • 2
  • 36
  • 36