jQuery Snippet: Slideout Tab

/ jQuery / by Paul Robinson / 57 Comments
This post was published back on February 26, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

A day or so ago someone asked me how to make one of these, so instead of just telling them I thought I’d post it here as a snippet of code that everyone can use. What you use it for is entirely up to you, but most people use it for social networking such as Twitter.

Before we get started here is a small demo to show how the slide out tab works. Obviously you would fill it with something a lot more useful than I have, but it’s just to show you how it could look and that it does actually work.

jQuery slideout tab demo

Now that you’ve seen the demo let’s get started. Here we go.

However that might get a little annoying for the user as it will slide out every time they hover their mouse over it. It would probably be better to slide on click. So to do that you would just need to change hover to toggle. However since jQuery 1.8 the toggle event (not method) was deprecated & removed as of 1.9 so it is no longer that easy. However there is some snazzy (did I really just use that word?) code that can help replicated it. Instead of making your whole div clickable though you’ll want to make a box and float or position the box that will be clickable, or the user will not be able to interact with the box once it slides out. Your HTML could look something like this.

With some CSS like this.

Now because of the toggle event being removed the jQuery gets a little more trickier than normal.

Basically what we are doing here is creating an iterator that is changed every time the button is clicked. This works because the value is stored on the element’s data object. We retrieve that value, or set it to 1 if it hasn’t been set yet. Then we use a switch to match the case. 1 is equivalent to show the tab, 2 is hide the tab. We increment the iterator, check it hasn’t gone over 2 & if it has reset it to 1, then save the value again. This process repeats each time the button is pressed & is a fairly nice way to replace the toggle (I think it is anyway). It can even be made into a jQuery function so you don’t have to keep writing it. I’ll leave that one as homework though. *wink*

Now I never claimed to be a great designer so my CSS is correct, but the coloring is awful. 😆 The point is that it works & you can spruce it up until you are happy with it. That’s it. Have fun. 🙂

If any regular readers are wondering, these little snippets are just so that the site isn’t left with no new posts for a long period of time. Sometimes I just don’t have any inspiration for new full tutorials, or I might not have enough time to write a massive post. So rather than have a huge gap between posts I’ve decided to post these little tips & snippets. I hope they help new readers & regulars alike.

57 Comments

Author’s gravatar

Hi there, is it possible to make the tab stick to the bottom of the page? I changed it to:

#slideOut {

position:absolute;

width:310px;

height:80px;

left:120px;

bottom:-290px;

z-index:9999;

}

but that doesn’t work. If I scroll down the page, the tab scrolls as well..

Reply
Author’s gravatar author

Hi,

It should be possible. You would need to change all of the CSS & the jQuery to use bottom positioning though.

I’m not sure what you mean by ‘the tab scrolls as well’?

Author’s gravatar

Hey there. Your code worked great for me and I was able to get it to even slide out by changing it from click to hover, but I wanted to ask if you know of a way to have hovers work for this on iPad devices? Thanks for the great code and tutorial.

Reply
Author’s gravatar author

Hi,

Hovers for the iPad are generally emulated by the iOS system. As far as I’m aware you can’t have hovers on touch devices. 🙁

Author’s gravatar

Great script – thankyou! Can you tell me how to move everything to the right side of the page without falling to bits as it has for me so far?
Thanks again.

Reply
Author’s gravatar author

Hi There,

If you check out the first page of comments here on this post you’ll see a few posts about how to get it working on the right hand side. To summarize you’d need to change all the mentions in the jQuery & CSS of left to right and set the CSS positioning to fixed instead of absolute.

Hope that helps.

Author’s gravatar

Hi, thanks a lot for this great script. I only got a little problem. It doen’t work with my jquery-1.9.1.min.js Library. It works if I use the same jQuery as in the demo page (1.5.2). So, do I have to load 2 jQuery libraries (1.9.1 + 1.5.2) on my page or is there another way? Sorry, I’m not good with jQuery (and with English too 😉 )
And, by the way, in the demo page, at the line 116, the div id=”slideOut” seems to be not closed? Am I right? Is it normal? I just wondering caus I’m Learning CSS/HTML 😉

Reply
Author’s gravatar author

Hi Pierre,

Thank you for letting me know. There is indeed a problem if you use jQuery 1.9 and up as the Toggle even I used was deprecated in jQuery 1.8. I have altered the code in the demo & will update the tutorial now. Also thank you for catching the bug in the HTML, I had indeed missed the closing tag, so nich catch. 🙂

Have a read through the tutorial again to see what has changed, but thank you so much for letting me know about the errors.

Author’s gravatar

Hi Paul, thanks to you for your fast reply and reaction. It works perfectly now 🙂 I’m so happy caus I have tested many other solution on the WEB but your script is the best ever 🙂 I’l keep your blog in my bookmark and follow you on FB. Merci beaucoup :p

Author’s gravatar author

Not a problem. Glad to have been able to help. The site is a little quiet at the minute due to a pretty heavy work load & Christmas coming up, but a bookmark & follow is always appreciated and I promise to get something new up soon.

Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more