Sliding Login Panel - jQuery query

JavaScript
1

Hi,

I’m loving this: Sliding Login Panel with jQuery 1.3.2

However, I’d like it to work so the ‘Close Panel’ link actually appears in the #panel itself and doesn’t swap/toggle with the ‘Login | Register’ part.

Can anyone show me how this can be done?

Many thanks

2

That hidden panel is inaccessible with JavaScript off, making this not a very good plugin, to be honest. It’s worth always checking something like that before using JavaScript. It’s also not easy to tab through, even with JS on.

3

Hi Ralph,

Thanks for the reply.

Unfortunately the client I’m working for really likes this so I’m a bit stuck I’m afraid.

Is there an easy way to do this so I can place the Close button inside the Panel?

4

As far as the JS goes, I’m no use to you, but you could relocate the close button with CSS, as it has its own class and id.

<a href="#" class="close" style="" [COLOR="Red"]id="close"[/COLOR]>Close Panel</a>

You could place the close butt wherever you like by using that id. All the same, though, it might be confusing for users. The way it’s set up—with the close btton where the open button was—is much more intuitive.

Undoing the toggle feature is more for the JSers, I’m afraid, among whom I’m not included.

5

The script looks to be quite simple. Here’s the part that handles the login/register/close part.


// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
    $("#toggle a").toggle();
});

The script doesn’t need to duplicate the same reference, and could instead be this:


[color="grey"]// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {[/color]
    [color="green"]$(this).toggle();[/color]
[color="grey"]});[/color]

Aside from improvements like that though, what’s the #toggle section?


<li id="toggle">
    <a id="open" class="open" href="#" style="display: block; ">Log In | Register</a>
    <a id="close" style="display: none; " class="close" href="#">Close Panel</a>			
</li>

So instead of toggling the links in the #toggle section, you can only instead toggle the close link.


// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
    $(this).toggle();
});

That, along with the previously mentioned CSS adjustment, should be all you need.

6

Hi Paul,

Thanks for your detailed reply.

I’ve now got it working :slight_smile:

Went with:

&lt;script type="text/javascript"&gt;
$(document).ready(function() {

// Expand Panel
$("#open").click(function(){
	$("div#panel").slideDown("slow");	
});		

// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
	$("div#panel").slideUp("slow");	
});
	
});
&lt;/script&gt;

and added:

<a id="close" class="close" href="#">Close Panel</a>

to the page.

Now it works :slight_smile:

Thank you for your help matey.