jQuery Snippet: Slideout Tab

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.

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.

jQuerySlideSnippetTab