Good jQuery Content Switcher

Question

Does anyone know of a good jQuery content switcher? I want to switch a log in and register form.

Answer 1

You can do something like this with minimal code, for example if you had:

<div class="links">
  <a href="#login">Login</a>
  <a href="#register">Register</a>
</div>

<div id="login" class="panels">
  Login Stuff
</div>
<div id="register" class="panels">
  Registration Stuff
</div>

You could do jQuery like this:

$(".links a").click(function() {
  $(".panels").hide();
  $(this.hash).fadeIn();
});

Just hide both initially with CSS if you wanted, like this:

.panels { display: none; }

When you clicked either link above, it would hide the other panels, and fade in the one you wanted to switch to for a nice effect...use the same convention as above and you could add any number of panels and links.

Some other pre-built alternatives if you want more complicated content arrangement would be something like:

• jQuery UI Tabs
• jQuery UI Accordion