CODEWITHSUNDEEP
jqueryformshtml
422
422

Reputation: 5770

Show / Hide Divs

I am trying to do the following.

Have two forms on page,

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 ?

Upvotes: 0

Views: 188

Answers (3)

superUntitled
superUntitled

Reputation: 22527

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;

     });

Upvotes: 2

Michael
Michael

Reputation: 20049

Check out my fork at http://www.jsfiddle.net/QHBa8/

Essentially upon clicking no (the onclick event) you want to hide div a and show div b. Using the jQuery id selector ($('#a') and $('#b')) you can get references to your divs and then call jQuery methods on them, such as show() and hide().

In the example code its all inline, you'd want to call out to a javascript function to do the actual work.

Upvotes: 1

Scott Baker
Scott Baker

Reputation: 10443

A simple solution? Yes. Refactor your design and use two pages, one for each form. The solution you're looking for? No.

Upvotes: -2

Related Questions