Question

what I am trying to do is on open, menu 1, showing ‘Click me to start’. Menu 2, which currently says ‘This is menu 2’, just for building purposes, is hidden. Then, on first click, menu 1 hides and menu 2 shows, then toggles back on second click. The problem is that once menu 2 is showing and menu 1 is hidden, it won’t toggle back.

<div id="nav" class="nav">
<div id="whiteboardtext1" class="whiteboardtext1"><p>Click here to start</p></div>
<div id="whiteboardtext2" class="whiteboardtext2"><p>this is menu number 2</p></div>
</div>​

.nav{
    width:700px;
    float:left;

}

.whiteboardtext1{
    position:absolute;
    margin-top:110px;
    margin-left:215px;
    width:300px;
    height:100px;
    font-size:30px;
    font-family:whiteboard;
    text-align:center;
    border:1px solid #fff;
    cursor:pointer;
}

.whiteboardtext2{
    z-index:1;
    position:absolute;
    margin-top:50px;
    margin-left:50px;
    width:650px;
    height:350px;
    font-size:30px;
    cursor:pointer;
    font-size:30px;
    font-family:whiteboard;
    text-align:center;
    border:1px solid #fff;
    cursor:pointer;
}


​$(document).ready(function(){
$('#whiteboardtext2').hide();
$('#whiteboardtext1').toggle(
function() {
$('#whiteboardtext1').stop().animate({

                        'opasity':'0'

                        }, 'fast');
$('#whiteboardtext2').stop().animate({

                        'opasity':'1'

                        }, 'fast');    
$('#whiteboardtext1').fadeOut();
$('#whiteboardtext2').fadeIn();
},
function() {
$('#whiteboardtext1').stop().animate({

                        'opasity':'1'

                        }, 'fast');
$('#whiteboardtext2').stop().animate({

                        'opasity':'0'

                        }, 'fast');    
$('#whiteboardtext2').fadeOut();
$('#whiteboardtext1').fadeIn();
})
});

​

I pretty sure the code is correct, but I just can’t get it to work.

If anyone can help, I would really appreciate it.

Thank in advance

me

Answer 1

If I understand you correctly – http://jsfiddle.net/M8Tgx/

I changed CSS rules for .whiteboardtext2 just added display:none; by default.

I rewrite your JavaScript to this:

$(document).ready(function(){
    $('#whiteboardtext1').click(function(){
        $('#whiteboardtext1').fadeOut();
        $('#whiteboardtext2').fadeIn();
    });
    $('#whiteboardtext2').click(function(){
        $('#whiteboardtext1').fadeIn();
        $('#whiteboardtext2').fadeOut();
    });
});​