Home/ Questions/Q 8618389
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T06:05:43+00:00

So I have a 3 page (Page1.php, Page2.php, Page3.php) registration page that is all

  • 0

So I have a 3 page (Page1.php, Page2.php, Page3.php) registration page that is all completed after over 20hrs of coding. But now I’m working on design. My idea is to put all the forms on one page rather than three different pages (Page1.php, Page2.php, Page3.php).

Here’s what the front page looks like:
Form

So when the user clicks the register link I want the form to appear in this region:
Form Registration

I have all the code for the forms so it’s just a simple matter of copy pasting. But what I need to do is implement some sort of slider for the form. So the user clicks register, the form appears on the right, they fill in the first page, then at the bottom right they click continue, and it SLIDES to the next page. Note, when they click continue i don’t want to go to a whole new page, I want to stay on the same page, I just want to display different content.

I know how to do all the onclick (show/hide) stuff in jquery, but I’m wondering if there’s a good plugin I can use to provide a much smoother transition and better expereience. Or if there’s a better way to do it (Pure CSS or something)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just set all content to .hide() and .show() the div which has a unique identifier.

    So you have:

    <a href="javascript:void();" data-tab="page1" class="tab">Page 1</a>
<a href="javascript:void();" data-tab="page2" class="tab">Page 2</a>
<a href="javascript:void();" data-tab="page3" class="tab">Page 3</a>
<div class="tab" data-tab="page1">Content for page 1</div>
<div class="tab" data-tab="page1">Content for page 1</div>
<div class="tab" data-tab="page1">Content for page 1</div>

    With the jquery code:

    $('a.tab').click(function(){
    $('div.tab').hide();
    $('div.tab[data-tab=' + $(this).attr('data-tab') + ']').show();
});

    Well, that’s basically it. You can do the rest, but this should give you a start in the right direction 🙂

    You can make it as complex as you would like. I have some coding who does this with a TabHelper in CakePhp, and with a little bit of javascript I built the same. Because I don’t like the jQueryUi tab plugin (hint)

    Also, have a look at Php Frameworks, you said you spent 20 hours coding for you registration and login.. Well, I did the same with CakePhp, but now my site is finished and is fully maintainable and sends emails on the right time and has a lot of functionality.

    • 0