Build An Incredible Login Form With jQuery

Aug 19th in Javascript & AJAX by Connor Zwick

One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we'll also animate it.

Author: Connor Zwick

I am a freelance web designer. I am currently renovating my personal site, which will be up within the month hopefully. I know HTML, CSS, Javascript, JQuery, PHP, Flash, and Ruby on Rails. I am also doing several website for pay currently. As well as designing a web site for a robotics team for free. This website will feature a lot of what I will cover in this tutorial. I have also coded a media management site and blog in Ruby on Rails. I also have extensive Photoshop experience.

In this tutorial, we'll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that's coming soon.

Step 1 Photoshop Layout

First we need to plan out our layout and make it look cool with Photoshop. Thanks to Collis, and his amazing Photoshop skills, we have a slick layout to work with. You can grab the before and after PSD file for further inspection in the source zip file. But it's pretty self-evident. It doesn't have any gradients either, so we should be able to make this fairly easily just with CSS.

Here you can see what the demo will look like in its normal state.

Here is what the demo will look like when the panel is slid down.

Step 2 --Planning the structure

First off, we need to build the page's structure. To create the layout above, what do we all need structurally in the HTML?

First off, we need a header, that extends across the entire width of the page.

We'll also need a top panel, which for now, we will pretend is permanently expanded until we insert the JQuery.

We'll need an area for the normal page content.

Finally we'll need a visual break between the header and page content, which we will accomplish through a horizontal ruler (hr).

Alright, so the layout of the page is pretty simple. Here it is:

<div></div>  <!--Header-->

<hr>  <!--Header Stripe-->


  <div>                  <!--Contains the button and panel-->
    <div>                <!--Contains the panel itself-->

      <div> This div will serve as the background of the panel</div>
    
    </div>
    <div><a>Login Here</a></div>  <!--Will be the button to slide the panel down-->

    <div><a>Hide</a></div>        <!--Toggles to this when the panel is slid down-->
  </div>
</div>


<div>

  All of the Content will go here
</div>

Wow...without classes or any content inside, it looks like a lot of pointless divs, but all will be necessary for the CSS and JQuery later on. Now we will start adding classes in preparation for the CSS.

Step 3 -- CSS preparation: Classes & ID's

Now we've got to change the skeleton into an actual site with CSS. We'll start by adding classes and ID's to all of those divs! You can do this easily by printing out the Photoshop layout and then marking up the areas and associated classes with a sharpie. For this demonstration, I will do the same only in Photoshop. Although it may be extremely ugly, hopefully it will show you the different regions of the page.

Note: I plan on having the normal non-highlighted image on hover.

Here is the page with the added classes and ID's:


<div id="header">
</div>

<hr id="header_stripe"/>

<div id="wrapper">
  <div id="toppanel">

    <div id="panel">
      <div id="panel_contents"> </div>
    </div>
    <div class="panel_button"><a href="#">Login Here</a></div>

    <div class="panel_button"><a href="#">Hide</a></div>
  </div>
</div>
<div id="content">

</div>

Right now, I'd show you a screenshot of what we have so far, but we don't have anything except a horizontal ruler and two unstyled links. You get the idea. Now we can style the page.

Step 4 -- Linking the files together

Before we go any further though, we need to introduce the CSS file to the skeleton. I created a stylesheet entitled "style.css". While we're adding code to the head, we might as well add the javascript and jQuery as well. Here is the head of the page:

<head>
<title>Nettuts JQuery Sliding Panel</title>
<style type="text/css">
@import url(style.css);
</style>
<script src="jquery.js" type="text/javascript"></

    script> <script src="javascript.js" type="text/javascript"></script>
</head>

Step 5 -- Styling the Skeleton: header

Now we have to style that skeleton of divs. Let's start from the top down. First we need to style the header as well as the body tag:

body {
    background: #202020;
    text-align: center;
    margin: 0px;
}

#header {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 135px;
    background: #3f3f3f url(images/header.png) no-repeat center ;
    position: relative;
    border-bottom: 1px solid #4a4a4a;
}

Fortunately, we have no gradients to worry about here. But we do still have a background image. I also added a 1px border to the bottom of the header for a visual break.

The background image is optional. I liked the Bell Gothic BT font so much, I decided to make it into an image. Alternatively, you can choose to just style plain text by adding styling to h1, and h2 tags:

#header h1{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
position: relative;
top: 30px;
font-size: 40px;
color: white;
}

#header h2{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #7e7e7e;
}

And then modifying the header to this:

<div id="header">

  <h1>Sliding Panel</h1>
  <br />
  <h2>jQuery Sliding Panel Demonstration for NETTUTS</h2>
</div>

So now the page should look like this:

You can view step 5 here.

Step 6 -- Styling the Horizontal Ruler

Although we have the bottom border of the header to visually separate the sections, we also need a thicker more visual border as well. Since we cannot apply two bottom borders to the header, we can just stylize the horizontal ruler (hr):

hr#header_stripe{
height: 12px;
position: relative;
top: -7px;
background-color: #191919;
border: none;
color: #191919;

}

We now have a thicker separation to add to the 1px border:

You can view step 6 here.

Step 7 -- Styling the Panel

Now we need to stylize the panel. Until we add the JQuery, we're going to stylize the panel like it was expanded. When we're done with the CSS, we're going to animate the height of the panel to zero, and then back to full height; so we need to make sure that when we change the height, it stays the same.

Here is the CSS code, I'll explain it afterwards:

#wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    text-align: center;
}
#toppanel {
    position: absolute;
    top: 135px;
    width: 900px;
    z-index: 25;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#panel {
    width: 900px;
    position: relative;
    top: 1px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    overflow: hidden;
    text-align: left;
}
#panel_contents {
    background: black;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    height: 100%;
    width: 904px;
    position: absolute;
    z-index: -1;
}

Ok, that's a lot of code for one box. Well it's more than that. Try inspecting it with either Firefox Extension Firebug or Web Developer, and you will see what all that CSS does.

Check out what Step 7 currently looks like.

First off, we need the panel to be positioned absolute, or else, when expanded, it will push all of the content below it, down. So we add a wrapper, which is wrapped around everything else, and then centered. If we left the wrapper out, the panel, which is positioned absolute, would not be able to be centered as easily.

Next, we add the style info for the toppanel as a whole. As you can see, this includes the panel buttons.

After that, we add the style info for just the panel which is hidden normally. This is the box that you see expaned now. I made the height 100%, so that if we increase or decrease the height of #toppanel, then the height of the #panel will be the same. Also, the overflow is hidden, so that if the height of the #toppanel is lowered, it will cut of the content of the panel.

If you examine the earlier HTML, you will see the div with the ID of panel_contents. This div, although empty, allows us to have the background transparent, while still keeping the content inside opaque.

Step 8 -- Add content to the Panel

Before we test out the panel, we need to add some content, to see if it hides it properly. In this example, we are making a login area, so we need to add a form, and we're also adding an image to balance it. This step is just to add content for the demo. It is less important and is more basic, so I will not explain it as much as everything else. Here is the code:

CSS:

.border {
    border: 15px #1d1d1d solid;
}

img.border_pic {
    border: 15px #1d1d1d solid;
    position: absolute;
    top: 110px;
    float: left;
    margin-left: 150px;
    width: 250px;
    height: 150px;
    z-index: 30;
}
div#login {
    width: 240px;
    height: 150px;
    position: absolute;
    right: 150px;
    top: 110px;
    background: #46392f;
    text-align: left;
    padding-left: 10px;
}
div#login p {
    color: #CCCCCC;
    font-family: Century Gothic, Georgia, "Times New Roman", Times, serif;
    line-height: 25px;
}
div#login input#password {
    position: relative;
    right: -6px;
}
div#login input#login_btn {
    border: 1px #899690 solid;
    cursor: pointer;
    position: relative;
    top: 30px;
    left: 86px;
}

HTML:


      <img class="border_pic" src="images/tutsplus.jpg" alt="Screenshot" />
      <div class="border" id="login">

        <p>Username:
          <input type="text" size="15" name="username" id="username" />

          <br />
          Password:
          <input type="password" size="15" name="password" id="password" />

          <br />
          <input type="button" accesskey="l" id="login_btn" name="login" value="Login" />

        </p>
      </div>

Step 8 is available here.

Step 9 -- Test out the CSS

We now need to make sure that if we use jQuery to animate the height of the top panel, it will work smoothly. Now that we have content, we are going to change the height of #panel to 200 and see what happens:

Wonderful. You can view step 9 here. Now we're going to change it to 0:

Perfect. Now we know that the design will work with JQuery.

Step 10 -- Styling the Button

If you examine the finished product, you can see that the button that slides the panel down, changes once you click it once. This means it toggles. Therefore, we need two buttons, and we will toggle their visibility. Before we hide one of them, though, we need to add CSS to them.

If you remember, we added the class ".panel_button" to them. Here is the style information. I will explain it after:

.panel_button {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 1px;
    width: 173px;
    height: 54px;
    background: url(images/panel_button.png);
    z-index: 20;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    cursor: pointer;
}
.panel_button a {
    text-decoration: none;
    color: #545454;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: 5px;
    left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
color: #999999;
}

Step 10 Panel Buttons

First we center the button using the auto margin technique. Then we position it and add a background of the button. We also add all of that styling information to accodmodate for all of the different browser's preferences. And make the button seem clickable by making the cursor a pointer, when you hover over it. This just improves the usability.

We're also going to wrap the text in a link, to provide an on hover effect, as well as positioning.

Step 11 Button HTML

Now, in preparation for the JQuery, we need to set up the buttons, with their HTML. First off we're going to add an image to each button, and position it with CSS, you'll see the HTML in a second:

.panel_button img{
position: relative;   
top: 10px;
border: none;
}

Now, we also need to hide the Hide button for now. As much as I hate, inline styling, I think it is just easier to add this CSS inline, so here is the new HTML code for the buttons, with the images:

    <div class="panel_button" style="display: visible;"><img src="images/expand.png"  alt="expand"/>
      <a href="#">Login Here</a>

      </div>
    <div class="panel_button" id="hide_button" style="display: none;"><img src="images/collapse.png" alt="collapse" />

      <a href="#">Hide</a>
      </div>

Ok, so notice, right now, the hide button is hidden with inline styling. This will be toggled later with jQuery. Notice, I also added an ID to the second button, so we can target it later easily.

Step 11 Panel Button

Step 12 Adding the Content

This is a quick, but necessary step, adding content. I wrote one sentence and added one paragraph of dummy text. I centered it using the auto margin technique, and colored it a gray color:

#content {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    position: relative;
    top: 90px;
    text-align: left;
    color: #545454;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-bottom: 30px;
}

See the text behind the panel in Step 12.

Step 13 JQuery Time!

Ok, now for the final part of the tutorial, JQuery! You can grab the latest JQuery at jQuery.com. If you're just beginning with it, be sure to check out this other Nettuts tutorial by Jeffrey Way, for great JQuery resources. I've already grabbed a copy from JQuery.com, and have already linked it to the page in Step 4.

Step 14 Think about what we need

Lets first think about what we need the JQuery to do, before we write the code.

We want to activate the animation on 'div.panel_button' click.

We then want to animate the height of the panel to 400px.

We then want to toggle the button.

Then we want to activate the reverse animation on 'div#hide_button' click.

Then we want to animate the height back to 0px

Step 15 Write the Code

So first we start out by getting the script ready with the following JQuery:

$(document).ready(function() {
});

Now we write the code that goes inside there:

$(document).ready(function() {
    $("div.panel_button").click(

        function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle();
            }); $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"
        });
   });       
});

Panel in motion in Step 15.

At first, when you examine the previous code, some of you might wonder why I only have toggle in the first action. Well, you need to remember that the hide button also has a class of panel_button. Therefore, when you click the 'Hide" button, you are actually applying both actions.

Step 16 Making the animation look 'real'

So now it's looking pretty good, but we can still do more; like making the animation look better. When animating, it's usually important to try to imitate real life as much as possible. In this case, I think of a real life example, like a pull-down projection screen. Remember when you pull those, you pull it further down then it will be, then it goes back up a little. In the same way, when you want to put it back up, you pull it down a little before it goes up very fast.

Let's try to imitate that:

$(document).ready(function() {
    $("div.panel_button").click(

        function(){ $("div#panel").animate({ height: "500px" }) .animate({
        height: "400px" }, "fast"); $("div.panel_button").toggle();
            }); $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"

        }, "fast"); 
      });       
});

Notice that we animate the panel to a height of 500 before going to 400. We also added a difference of speed like in real life, by making certain parts slower. If you look at the demo you will see that when you hide the panel, it still goes to 500 first. Again, this is because both buttons have the same class. So really when you hide the panel, it goes through this process:

Animate to 500 and toggle

Animate back to 400 fast

Animate back to 0 fast

Now we have a working Sliding Panel using JQuery. Hope you found this tutorial to be useful! If so, please submit it to Digg, StumbleUpon, DZone, etc!

Check out some more great tutorials and articles that you might like

Create a Photo Admin Site Using PHP and jQuery Screencasts
How to Mimic the iGoogle Interface Javascript & AJAX
Create A Tabbed Interface Using jQuery Javascript & AJAX

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

User Comments

( ADD YOURS )

Philo August 19th

Great Tutorial!
ebw August 19th

wow. this is so good.
Dewey August 19th

Not bad. Shouldn’t this be a sliding jQuery shelf tutorial rather than a form tutorial?
Javier Rios August 19th

This was a nice tut, just kinda skimmed over it but will try it out.
pickupjojo August 19th

Woah, very nice result!
I think I’ll use it on the website I’m currently doing.

Thanks for sharing.
Dan August 19th

This looks very nice. I’m working on a site that I’m having a rough time finding a spot for the navigation on. What do people think about having the navigation in something like this? Annoying?
Corey August 19th

Awesome tutorial but seriously it is time for something new! we all know jquery can slide so lets figure out something new it can do!!!
Ben Griffiths August 19th

This is great, one of my favourite so far
Neil August 19th

Nice!
Dan Harper August 19th

Great tutorial, and an awesome end result!
AP August 19th

Love you dudes. Great tutorial, keep inspiring us…
Thomas Milburn August 19th

An interesting tutorial. In terms of animation it’s really cool.

I think that the buttons to hide and show the panel should be dynamically added by the Javascript and that the panel should be visible by default. This means that the those users who don’t have Javascript enabled will still have access to the same functionality.
Connor August 19th

Glad you all have found it useful!
Connor August 19th

@Thomas off the top of my head, you could also just make the button a link to a login page, then disable the default action of the link with javascript. Then when someone with javascript enabled would view the page, the button would activate that top panel. And then when someone without javascript enabled would view the page, they would just have a link to a login page.
Taylor Satula August 19th

*** Off Topic ***

I’ve been getting a db error for the last hour.
Taylor Satula August 19th

Hurrah all the plus tuts will be on a seprate site. P.S good tut the dropdown’s a little jerky though
Connor August 19th

I’ve also been getting the db error…

As far as the drop down being a little jerky, I think that’s an issue with your specific computer.
Jammin August 19th

This is similar to the login box used on groove shark ( http://www.grooveshark.com/ then click login in the menu bar ), personally I prefer the way it works on groove shark but still nice.
Dan August 19th

This is pretty sweet, but it is busted in firefox 3.
insic August 19th

definitely its incredible. another great tutorial.
Connor August 19th

What do you mean Dan? I primarily use FF3, and have no problems with it whatsoever.
Craigsnedeker August 19th

Totally incredible! This is more of what I’d like to see!
swany August 19th

thinking out loud…
would this type of technique also be good for a sign up to the newsletter area? or would the question of javascript being turned on and off for some users be a problem that wouldn’t be worth all the trouble in the end?

right now i have just a simple form on the right of the screen, with some design around it.. works great, have no problems with it…. However, I like the idea of maybe adding some animation to the pages, but wouldn’t want to make it harder for some people who didn’t have javascript on. The age of people going to the site range from 13-80.. It’s tricky to make something interesting yet easy for people within that age range to operate… plus the clients want to stay corporate yet be edgy and “green”… ahh i tell ya…

if a user had javascript off then i would make a link to separate page with just the sign-up to the newsletter section?
Craigsnedeker August 19th

I don’t like it how it goes so far down it makes a scrollbar for that split second, ya know?
godonholiday August 19th

could this be implemented in the top of a wordpress theme? page? etc..
Bob August 19th

Cool tutorial although users without javascript can’t use it.

A simple solution might be to link to a login page or have the menu automatically display when javascript is disabled.
Chris Robinson August 19th

eh…this one is ok…title is a little misleading as Dewey said this should be a jQuery slider tutorial not a “form” tutorial.

when I first read the title I was thinking oh cool maybe a jQuery login form with validation, maybe some custom checkbox styling for a “remember me” and maybe even a little Ajax functionality…but i was disappointed to find just a slider.
Dayton Nolan August 19th

I’ll be the decenter and say that this is way too much production for a login box. This is bordering on “useless flash intro”. Animation is cool but let’s think about usability. Just because we CAN make elements fly all over the screen, doesn’t mean we SHOULD.
Connor August 19th

Dayton…did you even read the intro…? This isn’t useless. It’s whole focus is usability. Redundant information like a login form, make a page unnecessarily complex. A simpler page is easier to use, making it’s usability better.

Chris, I know. It could be entitled “How to Make an Animated Top Panel” as well.

godonholiday, yes it could. You could easily make it into a module, or just add this to your theme.
Shane August 19th

I’m still surprised how people write this:

$(document).ready(function() {
});

when people could just write this:

$( function() {
});

to do the same thing.

Anyway, I must say thank you, but like a couple of other readers have said, we’re seeing too many jQuery tutorials that don’t really teach us anything new.

I’m being quite harsh here, and it’s not on the tutorial writer. However, I’d also say that the slider down is ok, but the ‘bounce’ effect is a little over the top. Once again, the effect is a little ‘over-done’.
basicxman August 19th

I love jQuery! I would make the page scroll down though so you can see the entire panel.
Jeffrey Way August 19th

@Shane -

Many people, including myself, would argue that writing it out the long way allows for more readable code. Either way works just fine - but I typically find myself writing out the full document.ready(function(){});

Don’t worry. We’re done with jQuery tutorials until next week. Later this week, we’ll have a Facebook App tut, Shopping Cart tut, etc. Should be a good week!
Jeff August 19th

Quite similar to what was done on http://noahsclassifieds.org/.
Connor August 19th

Yeah…except that’s using mootools
Jonathan August 19th

Shopping Cart tut Jeffrey, now that is something to look forward too.

Great Tut, I use the same approach to hide my wordpress admin panel and special user links, site stats etc. Basically everything I want to see on the fly within a hidden sliding panel so not to bother everyone else with my boring admin stuff.
Jad Graphics August 19th

Great tutorial. Don’t mind the other people’s comments, keep these jquery tutorials coming. Also, the Shopping Cart tutorial should be very interesting. I really am looking forward to it.
Matt August 19th

Doesn’t look as nice in IE6.
Simon August 19th

Nice little tute, however the sliding method in jQuery probably isn’t the right look for it. You’d be better off with a pulldown effect rather than a reveal.
Rajeev August 19th

Very nicely done. The never-ending quest for the right login form may be one step closer to the end.
Thanks!
Chris H August 19th

Need some IE 6 “hacks”. It doesn’t look right in its present form.
Bhaarat Sharma August 19th

Nice tutorial but in real world users wont spend a lot of time on a site that opens up a whole new panel just for logging in.

I think if you guys make a tut that asks for uname pwd and when users hit submit just shows the wheel and says ‘logged in’ would be much better. small and concise.
insic August 19th

@matt dump your IE6 man. or your that too old to keep that..lol
shelly August 19th

ok. i am interested but have not yet tried it myself. i am tired of all the logins i have to do at all the different sites i go to. are you telling me that if i use this program i can make one popupbox that i can use to log into every site i go to. and then what will heppen when i dont login to the sites “login”panel? will i still get there. and how to erase a sites log in panel when it pops up?
Shane August 20th

@Jeffrey - just pointing out an alternative. I find my method more readable - it’s a question of what you’re used to seeing I suppose.

good to hear that new stuff is coming. I appreciate all the good stuff!
Christefano August 20th

This is similar to the login form I see every day in Warehouse. I can’t remembec how many times I’ve forgotten that the Warehouse login form wasn’t actually a modal dialog in my browser.

Here’s a demo:

http://ar-code.wh.engineyard.com/
Jay Salvat August 20th

Great one and nice effect.
Thanks Connor.
BroOf August 20th

Sounds very nice!
Brian August 20th

Great tutorial, but the form’s usability can be improved by adding the tag and “for” attribute to the field descriptions like this:

Username:

Password:

The “for” attribute should equal the value of the “id” attribute of the related element. When the text within the label element is selected it will toggle the form field.
Connor August 20th

How do you mean that it looks weird in IE6? I’ve tested it in IE6, and I can’t see anything…unless you’re talking about that slight positioning of the button?
Mark Bowen August 20th

Great tutorial. Makes for a nice introduction to a nice effect made possible with jQuery.

Would be nice to see an update to the tutorial though so that the button could have a link to a login-form so that users that have JS disabled can still use the page though. Can we get that added in to the tutorial perhaps?

Best wishes,

Mark
Lamin Barrow August 20th

Very nice but it’s not incredible in my onw opinion.
Johnny Caraveo August 20th

Great article, jQuery FTW!
khai August 20th

how do u use this form and add a simple image gallery
Andrew Strachan August 20th

Nice tutorial - some nice ideas but a little unorthodox in the implementation plus the code could be a whole lot leaner. It would definitely benefit from making the content available to all users, whether they had JavaScript enabled or not.
James August 21st

Nice effect… Not to sure about it’s necessity in this situation though.
Mike Bobiney August 21st

very springy!

when will we be expecting tutsplus.com?
Kevin Quillen August 22nd

Pretty sweet. I am going to use a variation of this for the new Dogfish Head website.

How about modifying this for another tutorial with something like Amazon or ZD Net’s extra navigations? (where they pop up a box with category links) - this can be engineered for that and is something I am working on.
Ryan August 24th

I like the functionality, but from a design standpoint, I would decrease the height of the login form div because when it is closed, there is no vertical scroll bar. But once you ‘open’ the form, a vertical scroll bar is required since the page is now much longer.

While this depends on the browser, you may wish to decrease the height as this is true for the most common browser size.

Otherwise very useful!
Billy August 26th

I don’t mean to be a wet blanket on this but:
1.) This isn’t Ajax, there are no server side calls
2.) How will this system handle an incorrect login attempt? Now to do it properly that would require Ajax.
Corinne August 28th

I really like the look and feel of the sliding panel. Great work! I was just wondering if there’s a work-around when the content beneath the slide-in panel is flash?

Basically, when I slide the panel down over the flash sitting in my content section, the flash sits on top of the log in panel. This happens in both FF3 and IE7 on a windows platform… on a mac (in FF) however, the panel slides over the flash content perfectly.

Suggestions?
Jeffrey Way August 29th

@Corinne - When you publish your swf file, there should be a “windowless” setting that you can check. This should allow the panel to show above it.
Den August 29th

i like it
Forrest August 31st

Your source code is missing the style.css document, I believe.
Fabryz September 1st

Nice! I was trying to do this during my sperimentations days ago
cgitech September 3rd

First…I like to say this is an excellent tutorial and further…an excellent website.

I am trying to set up a sliding panel on a website I am developing. Only I want to have it at the bottom of the header and slide up (in stead of down). How should I go about this?

Thanks for your help.
Curtis September 11th

Yes, very nice job, and Forest, you might grep the style.css here: http://nettuts.s3.amazonaws.com/041_TopPanelWithJquery/demo/style.css
Kali7 September 15th

I love it…. now how to implement that into a Joomla site…..
asp.net September 20th

great code
Thion September 29th

Despite of my best efforts, I can’t make it work - not by following this tutorial, nor by using demo (FireFox 3.0) - it’s just not working, and demo zip file is missing style.css (which can be acquired here: http://nettuts.s3.amazonaws.com/041_TopPanelWithJquery/demo/style.css) - I think someone mess up with this tutorial ;).
zac October 16th

Hi.. another great little tut. I got mine working well and was all happy, everything validates, yipee! Then I loaded it in IE 7 and the expanding form unrolled behind my other divs in the content. Very weird that it reacts so differently (for me) in the latest FF and latest IE. Any ideas of what could be doing this? The other divs it is dropping behind do not have a z-index so I dont know what is going on. Thanks to anyone who has some ideas on this.
deepu October 23rd

this is really a wonderful tutorial…
ScyberWolf October 28th

Thanks for the tutorial i’ll definitely use it on my site. Thanks again
owain Llewellyn November 4th

Is it possible to make the animation move from right to left as opposed to top to bottom?

I have a column with text in on the right that I want to slide out to produce 4 columns like a pull out..

any one got any ideas?

http://www.icomcreative.com
Sal November 4th

Hello admin, nice site you have!,
Abhi.. November 4th

Attractive and Usefull !!
gil November 7th

Can it be auto open onload?
Devin Rajaram November 20th

How would I add “Register Today!” to this whole script.
Im building this for my school website Im working on
Devin Rajaram November 20th

Forgot to add, please email me how I can go about doing this and a link back to this topic because Im always on the go to learn new stuff