Question

I am trying to do the following.

Have two forms on page,

• [ form 1 ]
• [ form 2 ]

Essentially look at fiddle http://www.jsfiddle.net/ozzy/S9nX7/1/

I want form 2 to be hidden on page load.

If user clicks yes on form 1, it takes them to new page
If user clicks no on form 1, it hides form 1 and shows form 2

I am buggered if I can work out the js to do this.
Hopefully using jquery slide , with easing… I have looked on jQuery site, and at slide up down, toggle show etc but.. am lost is there a simple solution ?

Answer 1

I have updated your code.
http://www.jsfiddle.net/S9nX7/4/

I have added the required css, and the required jQuery. I have cleaned up your html.

To hide the div#b on page load, use css: #b{ display:none; }

To hide div#a and show div#b when you click a.no, use jQuery. If you want sliding transitions, replace the jQuery hide/show with slides or whatever effect you want.

$("a.no").click(function(){
                 $("#a").hide();
                 $("#b").show();
                 return false;

     });