Bootstrap dropdown password recovery submenu

Question

I'm building bootstrap site and I'm stuck with the Forgot Password option in the Login menu.

When you click the Log In button, which opens a dropdown form, and then click the Forget password link, I want an entirely new form with inputs for password reset (ex. email, username etc.) and new button with different action for password reset. I want the form to appear the same place of the log in form (it should switch).

What's the best way to this?

Here's the snipped i'm using: http://bootsnipp.com/snippets/3kNkX

Thanks in adanvce.

Answer 1

Put the contents of the forgot password form in an HTML file and load that into the little box that holds the login form. I used .slideInRight as the selector for the login form, but it's probably better if you give that box a unique ID and use that as the selector instead.

$('.forgot-password').on('click',function(e) {
  e.preventDefault();
  $('.slideInRight').load('/forgot-password-partial.html');
});