Toggle divs - "replacing content"

Toggle divs - "replacing content"

Dear forum.

I am new to JQuery and I am looking for the best way to toggle content.

What I have is a login form and a recover password form.

The recover password form is hidden (display: none;) and I only want to show it when I click the "recover password" button.

This can be done with the .toggle() function, but I want to hide the login form and replace it with the recover password form

Quick markup could be;

<a href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display: none;"></div>

How can I do this the best way?

Thank you.