Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Good jQuery Content Switcher [closed]

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

like image 681
Christopher Avatar asked Sep 02 '25 06:09

Christopher


1 Answers

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
like image 70
Nick Craver Avatar answered Sep 04 '25 21:09

Nick Craver