jQuery ‘Tab Slide Out’ Plugin

September 1, 2009

A couple weeks ago, I made this pull out slider thing using jQuery. (people use them as ‘feedback’ tabs) I decided to try making it into a plugin for jQuery and here it is. Use it for creating a feedback form, contact info, or any content which is revealed using a sliding animation by clicking on a tab. Not sure how to describe it, check out the example.

See example page
Download the plugin
Download sample project files

You can apply the tabSlideOut object to a div that you want to become hidden content that is revealed by a tab.

Type the html

Create a div that will contain the hidden content. You will need a link in there with the class of ‘handle’. This is what will be replaced by your image and be the ‘tab’ or ‘handle’ that will stick out form the side of the screen.


<div class="slide-out-div">
    <a class="handle" href="http://link-for-non-js-users">Content</a>
    <h3>This is extra content</h3>
    <p>Something that wasn't important enough to be in your main body, 
   but that you wanted to hide off the side of your screen for some reason.
    <p>Could be a form to submit feedback, or contact info</p>

Style it however you wish with css

Really doesn’t matter how you style it but it does require a width This is how I styled mine:


.slide-out-div {
    padding: 20px;
    width: 250px;
    background: #ccc;
    border: 1px solid #29216d;

Create your ‘tab’ graphic

I used photoshop and made this one:

You can use any graphic you want, although make a note of the height and width of the image because you need to define that in the plugin options.

Set the plugin options

The most important options to set are the first four in the following list. Everything else is just for fun. Comments in the code explain what each option is for.

    tabHandle: '.handle',                              //class of the element that will be your tab
    pathToTabImage: 'images/contact_tab.gif',          //path to the image for the tab *required*
    imageHeight: '122px',                               //height of tab image *required*
    imageWidth: '40px',                               //width of tab image *required*    
    tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                                        //speed of animation
    action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
    topPos: '200px',                                   //position from the top
    fixedPosition: false                               //options: true makes it stick(fixed position) on scroll

To see all these pieces working together as well as some code to copy/paste see the working example here.

Comments (152)

  1. MichaelSeptember 3, 2009

    That’s pretty cool!

  2. JasonSeptember 7, 2009

    Anyone got a problem running this on a page that has a CSS Lightbox on it?

  3. ZanerSeptember 7, 2009

    Awesome! A dropshadow under the entire thing would be nice… CSS3 anyone?

  4. WillyPSeptember 7, 2009

    Jason, thanks for checking this out, what type of problem were you having? There could be a conflict in some css, although there should be a way to make it work. Do you have a link we can look at? Are you possibly using another javascript library as well as jQuery?

  5. Simon BrowningSeptember 10, 2009

    Thats a great little plugin.

    I’ve been playing with it the last couple of days and now we’re creating a feedback extension module for the TYPO3 cms using your code.

    Prelim version is here: http://thedemo.ca, we’ll be releasing a public version after the weekend.

    Mind if we credit you in the doc?



  6. WillyPSeptember 10, 2009

    Thanks! It looks really good. Nice job on the design of that. Very cool. I’ll have to check out TYPO3. Let me know if you have any suggestions on improving the code.


  7. feadbackSeptember 14, 2009


    You should provide even to inprove your plugin.
    for example : onShow, onHide…

  8. WillyPSeptember 14, 2009

    Thanks to Simon for pointing out a bug with the right side option. This has been resolved in the latest version. AND thanks to Mike Browne for pointing out I neglected to document the leftPos variable for the top and bottom options…

  9. C. MarceraSeptember 16, 2009

    I’ve integrated the plugin into one of my sites, a phpbb forum. It looks and works great in IE8 and FF3.5 on my PC. However on my Mac, it starts already slid out, then slides out MORE when you click on the already out tab. This is in both Safari4 and FF3.5. Haven’t figured out how to fix this one yet…

  10. WillyPSeptember 16, 2009

    Weird, I developed this on a mac, and tested on Safari and Firefox. Can you provide a link?
    lol@ it sliding out MORE.

  11. RobertSeptember 17, 2009

    This script is great!

    I’m positioning it on the bottom and was wondering what piece of script i have to change or add so that the tab will stay centred when resizing the window. ie. like how you would set a div to:

    margin:0px auto 0px auto;

    Any Suggestions?



  12. MikeSeptember 19, 2009

    Thank you! Had been looking everywhere for this.

    Is there an easy way to add a rollover state for the tab image?

  13. WillyPSeptember 19, 2009

    Rob, To get this perfectly centered in a wrapper div would take a different approach, I think the left position will need to be changed with javascript when the user changes the window size. If you want to center it to the entire window for now, you can:
    set the leftPos to ‘33.3%’.

    I will look into the option of detecting the window change and adjusting the position. I wish it was more simple, however the way I am using position:fixed and hiding the side-out-div under the bottom of the window, it is no longer effected by the margin property.

    Hey Mike, the easiest way to add a hover state would be to add a bit of css to your tag that you defined as your tabHandle.

    If you have the class name as : ‘.handle’ Then your for your CSS add a hover class

    a.handle:hover {
    background: url(images/hover_state.gif) no-repeat 0 0;

    Of course the more efficient way to do this would be to include the hover state in the original image and then use background-positioning to switch the viewable area.

    a.handle:hover {
    background-position: right bottom;

    Technique documented here: http://www.websiteoptimization.com/speed/tweak/cssrollovers/

  14. Michael R.October 8, 2009

    Hi William,

    Your stuff is just…marvelous.

    I just wanted to thank you for this job.

    5 minutes ago i was searching how i can automaticaly slide it out on load by adding stuffs on my function.
    But your already implemented the “onLoadSlideOut” on the js. So nice :).

  15. WillyPOctober 9, 2009

    I’m glad you found it useful, and very glad that you found the ‘onLoadSlideOut’ feature, since I never updated the documentation on this page to tell anyone it is there!

    So if anyone else wants to use that option, know it is there, simply add the following line to your options.

    onLoadSlideOut: true

    Thanks for being nice…

  16. BeccaOctober 13, 2009

    Hi William,

    Great plugin, thanks for releasing it and providing a clear example.

    Is there anyway the slide out could be triggered from another link? I have a link in the text of the page that I would like to slide out the form when clicked, as an alternative to clicking on the handle itself. Any idea?

    Thanks again :)

  17. WillyPOctober 14, 2009

    Absolutely that is possible, but unfortunately that option is not built in. I like the idea however. I am playing around with the best way to build that in now. I will let you know what I figure out. Thanks a lot for the feature request! Always fun to see what other people think of when it comes to using this thing.


  18. Trevor AllredOctober 14, 2009

    I’m trying to do the opposite of what Becca is doing. I’d like to “close” the tab from another link.

    It would be great if the private methods slideIn and slideOut were exposed through some sort of API.

    Thanks for such a great tool though!!

  19. Trevor AllredOctober 14, 2009

    Opening and closing this was easier than I thought. Thanks jQuery.


    Actually, since I’m extending this class, I did this:


  20. WillyPOctober 14, 2009

    Nice Trevor! Thanks…Becca you can use that as well becasue it should toggle between open/closed

  21. DylanOctober 14, 2009

    Awesome, awesome job!

    Quick question… for whatever reason the image I use for the tab is flashing whenever I click on a form element, link, or even click on the image itself to roll the div out.

    This doesn’t happen on your example, and I’m not sure what could be causing it.

    I know this is a pretty vague question, but I was wondering if you had any suggestions?

    Thanks a ton and, once again, great job!

  22. WillyPOctober 14, 2009

    URL or it never happened ;-)

  23. DylanOctober 14, 2009

    Wow! Quick response.

    I guess I should have included that. :)


    Thanks again!

  24. WillyPOctober 14, 2009

    My suggestion is to try some old fashioned trouble shooting on that. Definitely kinda weird. I would break it down so that the only thing on the page is the tab thing and get that working perfectly first. Then start adding the other elements back in until it breaks. Looks like there is some dreamweaver javascript in there maybe? That might be doing something odd. Not sure, but advice is to break it down to the core and figure it out that way. Good luck man!

  25. DylanOctober 14, 2009

    Okay, thanks for the tip!

    Thanks again for an awesome script!

  26. rnatsOctober 15, 2009

    I am already using a jquery carousel and the contact tab is having a jquery conflict. How do I avoid the conflict.

    Thanks for the awsome slide out tab.

  27. Trevor AllredOctober 16, 2009

    I needed to move the button down a bit so I added this default option:
    tabHandleOffset: 0,

    Changed line 90 to
    settings.tabHandle.css({’right’ : settings.tabHandleOffset});
    and line 100 to
    settings.tabHandle.css({’top’ : ‘-’ + properties.tabHeight});

    One other change I’m considering is how to make the tab take up the whole screen top to bottom. or left to right. For example, the left position would be 100% of the screen with absolute positioning top: 0.

    Great tool!

  28. WillyPOctober 17, 2009

    Mats, What jquery carousel is it? Do you have a url?

  29. beopOctober 19, 2009

    Nice work!
    Would it be possible to get it to “push” the main page to the right instead of floating above?

  30. WillyPOctober 19, 2009

    Check out how this guy did it:

    But basically you can apply this to any div so, I think if you design your div so that it is just a full column, you should be able to make it work.

    So, actually what that guy did is not what you wanted. You want more like what this guy did for his login screen:


    My plugin isn’t probably the best choice for making this happen.

  31. HeatherOctober 20, 2009

    When my page loads, the whole tab expanded flashes on the left side before settling on the right side. Anyone else experiencing this? I thought to hide it by default but that doesn’t work either.

  32. WillyPOctober 20, 2009


    Do you have a url to look at?


  33. beopOctober 21, 2009

    Hi Willy
    Trying to clone the slider from
    derekperez.com/jquery-pageslide/demo. But I want your setup with a hidden div instead of a separate page.

    Using firebug I see there’s an element.style set to position:absolute. Can i change that somewhere in the js or do you have any other ideas?

  34. JohnOctober 21, 2009

    thanks for the mod I see it works great on other peoples sites, but I cant get it working on my page.

    I get the following error: Object expected line 51 and line 51 is


    see page here http://mypumpkindoodle.com/organic-cotton-bedding-accessories.php

    i’ve tried stripping just about everything out of the page, but i still get the error? any thoughts? When i upload your test file it works fine, so I am baffled.

  35. JohnOctober 21, 2009

    well i re-changed the location of the jquery.min.js file I was pointing to a local one, and the error is gone now, but now nothing shows up…. i shouyld be able to figure that out but if you have any ideas if you see its not working when you look, that would be much appreciated!


  36. WillyPOctober 21, 2009

    Looks like it is working for me, I did notice that the page loads fairly slowly, so that may have been the issue. I would look into optimizing the page load on this site.

    Looks good, looks familiar also, did you use some sort of facebook widget to use as the content for that tab?

  37. CompliantOctober 22, 2009

    You’re missing type attributes on your style and script tags, so your example isn’t valid HTML. When offering examples to share, XHTML is better, so include CDATA sections, too.

    <script type=”text/javascript” src=”…

    <script type=”text/javascript”>


    <style type=”text/css”>


    It seems that you’ve learned CSS from Microsoft or from others who learned from Microsoft – the border attributes in non-standard order are the giveaway. (Note that I’ve also removed the pointless space after the colon.)

    smells like microsoftie lamer:
    border: #29216d 1px solid;
    professional web developer:
    border:1px solid #29216d;

  38. WillyPOctober 22, 2009

    LOL. Awesome.
    You’re missing politeness in your comment. Not sure where you learned how to communicate with other human beings, it appears you haven’t, the sarcasm in your tone was a dead giveaway. This would have worked just as well:

    “hey man, thanks for providing the example code, you might want to make it be more compliant with W3C standards so that we can continue to promote web-standards on the web. Here are my suggestions:”

    Part of being a ‘professional’ is being polite and helpful toward your colleagues.
    Thanks though, I actually agree with most of what you said, so I will update that. :-)

    I noticed you didn’t provide a url to your site. I’d love to see how professional web developers do things.

  39. WillOctober 22, 2009

    Is there a way to get these pull outs to be position relative to div instead of the side of my browser window?

  40. WillyPOctober 22, 2009

    Yes, pretty easy If I understand you correctly. Just put the <div class=”slide-out-div”></div> inside the div you want it to be relative to.

    I havent tested this example but try this:
    <div class="slide-out-div-wrapper">
         <div class="slide-out-div">

    Then css:

    .slide-out-div-wrapper {

    Let me know if that works,

  41. WillOctober 22, 2009

    Hey WillyP, thanks for the reply.

    When I position relative, it shows correctly – however when I put overflow:hidden on it hides my buttons.

    This is it with out overflow:hidden on: http://img28.imageshack.us/img28/4206/slideout.png

    You can see the tabs are in the correct position but the content of the div show to the right.

    Thanks in advance for your help!

  42. WillyPOctober 22, 2009

    Check out how it works here:


    With position:relative and overflow:hidden, but, yeah, check out that example, and see if you cant figure out why that works ;-)

  43. WillOctober 23, 2009

    WillyP, you are a star – I put it in the overflow hidden on the wrong bloody div!


  44. DanCOctober 23, 2009


    I love this plugin and am hoping to be able to make it work. I have set up the following testing page:


    I have three tabs on the page. They are all working the way they were built to work. I need to only allow 1 tab to be open at a time. So if a tab is open and a user clicks one of the other tabs, the first one closes before the new one opens.

    I am just getting started with trying to understand how a plugin works, so have no idea where to modify the code, or how to modify it to add this functionality. Ideally, it would be nice to have this as an option like “Allow Multiple Open”.

    If anyone can help me out here, hopefully I will learn a bit about plugin authoring in the process. Thanks in advance…


  45. WillyPOctober 23, 2009

    Will, Actually I think I gave you slightly bad advice in my first response to you. I just hacked around on that example and made it work but couldn’t put it into words, so, props to you for figuring it out. Thanks!

  46. WillyPOctober 23, 2009

    Cool, looks good. What you want to do is totally doable with a little work. Someone else suggested a callback function to add to this, which I should add.
    So the way I’d approach this on a high level is, on every click close any open tabs first, then look at which tab has been clicked and only open that tab. But, you knew that part!
    So, I need to change the plugin so that I expose the ‘private’ methods that do the animations. That will be the first step. Because of my schedule right now, it might take me a week to get that done. If anybody else wants to help with that. That would kick ass. :-)

  47. DanCOctober 23, 2009

    Thanks a bunch WillyP! I have been sitting here looking at the code and hoping that I hear a little bell, and suddenly I would understand how to make the necessary changes, that is not likely to happen. I just dont “get it” yet. I look forward to any way you, or anyone can help.

    In the meantime, I am gonna continue to look at the code and listen for the bells…… hahahah

    Thanks Dan

  48. WillyPOctober 24, 2009

    So here is what I came up with as a rough draft on this multiple thing:

    Not perfect but a start.

    Download this funky version of the plugin here:

    Its almost great, but the problem right now with this one is that it pauses too long before it opens the first one.

  49. DanCOctober 26, 2009

    Hi WillyP & Others,

    First off, thanks for your effort on this. It is so close. I think that the slight pause is really not that bad and I can certainly live with it to gain the benefit of the multiple tabs.

    There does seem to be a problem, or just a lack of understanding on my part. Below are three sample pages: The first is my original idea without your new version.


    The second is basically my original version with the changes I found in your demo page pursuant to the new version:


    You will notice that it seems to work exactly like the first sample. The third and final sample below, more exactly replicates your sample page for the new version in that, only one call to the plugin is made calling the class “slide-out-div”. Although this seems to be a working model, I am unable to change the handle image, so all of my tabs are the same. What am I missing here? is there a way to do this. Should I be using the tab2 and tab3 class to change the graphic for those tabs respectivly?

    Once again, Great Work & Thanks again for any light you can bring to the subject.


  50. DanCOctober 26, 2009

    Sorry gang, here is the third sample:



  51. DanCOctober 26, 2009

    Hi WillyP,

    So I played around with this a bit more and have a sample that with my mods works for the basic idea. I am sure that this could be done better as my skill level is a million miles behind yours.

    My example is located at:

    http://www.rickanddan.com/NewStuff/tabSlideOut/DDC/DDC4.html (Go Figure)

    Here is what I did, I tested my idea of adding handle css for each of my tabs to the style section on my page. This simply adds the css for the tab image.

    .tab .handle{
    background:url("../images/tab-1.gif") no-repeat;
    .tab2 .handle{
    background:url("../images/tab-2.gif") no-repeat;
    .tab3 .handle{
    background:url("../images/tab-3.gif") no-repeat;

    Then I make sure that the pathToTabImage is set to null:

    pathToTabImage: null, //path to the image for the tab

    then in the js file I add an else to your section dealing with the tab image:

    //set initial tabHandle css

    if (settings.pathToTabImage != null) {
    'background' : 'url('+settings.pathToTabImage+') no-repeat',
    'width' : settings.imageWidth,
    'height': settings.imageHeight
    }else{ // DDC Settings
    'width' : settings.imageWidth,
    'height': settings.imageHeight
    }); // end DDC Settings

    That seems to work in the most basic sense. It does not handle a situation where tab handle images may be different sizes, and I am not sure where to begin there. Also, a question. Will the code you wrote only deal with left side images now? I havnt tested but am guessing that it will not work.

    Please let me know if I am “on the money” or completely off base here. I’m learning as I go…..

    Thanks Dan

  52. MarcOctober 26, 2009

    Hi there,

    First of all, hats off for the plugin. Absolutely superb. As a newbie to jquery, my question is probably rather bland, but I was just wondering if this could be set up to work without a tab image and instead use part of the div as the mouseover activate the sldie out effect instead?

    Many thanks, Marc.

  53. DanCOctober 26, 2009

    Hey WillyP,

    So I have commented out all of the css stuff in the js file that pertain to the tabhandle and moved that over to the css in my page. This now allows me to specify different tab sizes and images for each tab, while still allowing it to work with your new test code.

    An Example

    Thoughts? Direction?


  54. WillyPOctober 26, 2009

    Looks good to me. You have sufficiently pushed this plugin beyond what I had thought people would do with it. So, good work!

  55. WillyPOctober 26, 2009

    Marc, You can do this. Easy way: Just don’t provide a path to the image file and set your css for the a.handle the same height as your div. This method might not accommodate your design however. In that case the hard way would be to edit some code in the plugin. (which will void your warranty of course). Look for this code:

    obj.css({ ‘left’: ‘-’ + properties.containerWidth});

    You might want to try messing with this value so that the entire div doesn’t get hidden. So subtract from this value the amount you want the div to stick out. example:

    obj.css({ ‘left’: ‘-’ + (properties.containerWidth – 20)});

    I’d experiment with that.


  56. EmmaOctober 28, 2009

    hi – brilliant plugin :)

    i wondered if you could position it rather than just have it stick to he side of the page? dont have the internet at home so please reply to my email address if you can!

  57. EmmaOctober 28, 2009

    ..id need it to be positioned right, but just ‘in’ from the right hand side of the page

  58. WillyPOctober 28, 2009

    In the settings of the plugin:

    tabLocation: ‘left’,

    Just change it to:

    tabLocation: ‘right’,

    That should do it.

  59. chrisOctober 28, 2009

    Hi WillyP

    Great code and thanks so much for sharing your talent with everyone.

    I am wondering if there is a way to make a button to close the div. I know you can simply click outside the div to make it collapse but is there a way of making a on click on a button?


  60. WillyPOctober 28, 2009

    So, here is the code you can use:


    Just have a close button has the class of ‘close-button’ and that should work.


  61. chrisOctober 29, 2009

    Thanks sorry for being a bit thick but where do I put the


    does it go in the jQuery file and if so where abouts. I tried putting it into the jQuery file like this but it wigged out.



  62. WillyPOctober 29, 2009

    No worries.

    so, you should be able to put it right below where you put the call to the plugin, example:

    tabHandle: ‘.handle’, //class of the element that will be your tab
    pathToTabImage: ‘images/contact_tab.gif’, //path to the image for the tab *required*
    imageHeight: ‘122px’, //height of tab image *required*
    imageWidth: ‘40px’, //width of tab image *required*
    tabLocation: ‘left’, //side of screen where tab lives, top, right, bottom, or left
    speed: 300, //speed of animation
    action: ‘click’, //options: ‘click’ or ‘hover’, action to trigger animation
    topPos: ‘200px’, //position from the top
    fixedPosition: false //options: true makes it stick(fixed position) on scroll


  63. chrisOctober 30, 2009


    That’s got it working!

  64. jordanOctober 30, 2009

    For users that don’t run the javascript flawlessly I’d like to just hide the slideout div altogether. So I figured I could just set the style on the div to hidden, then use some onload jquery to show it again. This doesn’t seem to be working for me… Any ideas?

  65. WillyPOctober 30, 2009

    so, in yer css:
    .slide-out-div {

    right above where you call in the plugin to your page do this javascript:

    $(’.slide-out-div’).css(’display’, ‘block’);

    Have fun.

  66. jordanOctober 30, 2009

    That worked! It’s funny that I tried multiple variations of that idea… I just didn’t get it spot on. Thanks for the help.

  67. jordanNovember 5, 2009

    Also curious… is there an easy way to tie in the background shadowing on slide out effect? aka the rest of the page darkens so that the slide out tab stands out more.

  68. WillyPNovember 5, 2009

    I love the word ‘easy’ ;-) I think I would say no in this case because its not a built in feature of the plugin. Certainly it is doable to dim the rest of the screen while the tab is open. A lot of times this is refereed to as a ‘lightbox’ effect. Its created by having a div cover the entire screen that has its opacity set to .5 or .8… Conceptually easy, definitely a bit of work to get it all tied in with the plugin and working perfectly.

  69. jordanNovember 5, 2009

    That’s exactly the answer I was looking for. I can certainly get it figured out on my own, but didn’t want to go to the trouble if you had already included it as a feature. Thanks!

  70. JamesNovember 14, 2009

    Hi, firstly can I say what an excellent plug in this is – very simple to implement, follow – and genuinely useful! I can see so many uses for this.

    Unfortunately, I have a slight issue at the moment, and was wondering where I’m going wrong. I’m trying to enable invocation from a second button, using $(’.button’).click(function(){$(’.handle’).click();}); -as suggested. This closes an already open tab fine; however trying to *open* from this second button causes the tab to slide out and immediately slide back in. I’m at a complete loss!

    You can see this in action here: http://design.jameshare.co.uk/CHES/ (lines 169-184 are key)

    Many thanks in advance!

  71. WillyPNovember 14, 2009

    James, Thanks for pushing me to fix this the right(er) way. I have now added the functionality to have an external link open and close the slide out div.


    The newest version of the plugin can be downloaded there. Use that one. There is a new option you can use when you call in the plugin called:

    toggleButton: '.button', 
    example: Click <a href="#' class="button" >Here</a>
    to open/close the dealio.

    Hope that helps. People have been asking for this for a while and Ive been lazy about it since that one trick that dude came up with kinda worked. Thanks for pointing out the major flaw in that. :-)

  72. Kyle HoganNovember 17, 2009

    Any idea why I can’t get this to work on my site?

  73. Kyle HoganNovember 17, 2009

    Nevermind. On your demo page you are missing “type=”text/javascript”>” after “tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js”

  74. WillyPNovember 17, 2009

    Dont think that is why. That attribute isn’t really needed. What other type of script would it be? Bring on the shower of hate from the standardista zelots! :-)

  75. Kyle HoganNovember 18, 2009

    The closing was missing too. It didn’t show up in my comment.

  76. WillyPNovember 18, 2009

    AH HA! now THAT is a really bad thing. Thanks for pointing that out. Fixed.

  77. Kyle HoganNovember 18, 2009

    Can’t seem to get the hover to work to change out the image on the “handle” tab. I tried just about everything and am getting frustrated. :)
    a.handle {display:block;width:50px;height:110px;background:url(../allure/images/pullout-bg-top.png) no-repeat;}
    a.handle:hover {background-position: 0 -110px;}


  78. Kyle HoganNovember 18, 2009

    Whoops. The URL for the image in the CSS was wrong, but I’m still not getting the hover rollover effect to change the image. /allure/images/help-tab.png

  79. WillyPNovember 18, 2009

    Yup my bad. I am setting the background-position inline using js. That will overwrite anything in an external css file.

    Version 1.4 is coming out soon. It will resolve several things that have come up. But if you cant wait. Go ahead and download this version which has the css background-positioning issue solved.



  80. ultras teiNovember 19, 2009

    Hi Willy!
    I love your Tab Slide Out, but I cannot use it on my website because of a conflict with http://www.ultrastei.ro/prototip/js/prototip/prototype.js (from prototip2 – http://www.nickstakenburg.com/projects/prototip2/) and with http://www.ultrastei.ro/wp-content/plugins/lightview-js/js/prototype.js (from lightview – http://www.nickstakenburg.com/projects/lightview/). If I remove Prototip2 and Lightview, Tab Slide Out is working perfect, but I don’t want to drop out them. You can find a solution for this? Thank you so much!

  81. chrisNovember 19, 2009

    Hi Great script again.

    I am running a jquery gallery and this seems to be conflicting with the slide out tab as the whole div appears at the bottom of the page. Any idea why this could be or should I not run the clide out div on the page that has the gallery?

    gallery is galleriffic-2.0


  82. Kyle HoganNovember 19, 2009

    WillyP. Thanks. The update on the jQuery worked on the hover mouseover issue. :)

  83. TimNovember 20, 2009

    Really like the script thnaks

    If I add filter:alpha(opacity=90); to the .slide-out-div style the box fails to load. opacity: 0.9; works is there anyway to apply an opacity to internet explorer?


  84. MikeNovember 20, 2009

    Hi Willy,

    Thanks for supplying this free code. I’m running into one problem though. I need to place this tab in the middle of the page above another element. I’ve created a wrapper div and can get the desired effect when I choose left, right, or top. But when I choose bottom the slideout ignores the wrapper div and is on the bottom of the browser window. Any idea how I can fix that?


  85. MikeNovember 20, 2009

    Ah…nevermind. I deleted:

    , ‘position’ : ‘fixed’

    from line 98 and all is well.


  86. ultras teiNovember 22, 2009

    I made a .txt to you to see an clear example of what I told you: http://www.ultrastei.ro/tabSlideOut-issue-lightview.txt

  87. WillyPNovember 22, 2009

    ultras tei,

    What I think is happening for you is simply a conflict between libraries. Learn more about it here:


    Generally, I try to not mix libraries. Although it is possible and should work just fine.
    I haven’t tested this, but you can try this:
    tabHandle: ‘.handle’, //class of the element that will be your tab
    pathToTabImage: ‘images/contact_tab.gif’, //path to the image for the tab *required*
    imageHeight: ‘122px’, //height of tab image *required*
    imageWidth: ‘40px’, //width of tab image *required*

    It may take more within the plugin itself. I’m not sure.

  88. ultras teiNovember 23, 2009


    thank you for helping me, but it’t not working with ad jQuery.noConflict(); too. :(

  89. dazed & confusedNovember 24, 2009

    Don’t laugh. How do I install this in a wordpress site? How and where would I go about installing it? Using WP because of it’s simplicity for a neanderthal like me.

    Is it difficult to build it as a plug-in suitable for a WP install?

    Your skills are admirable – i’m learning…S…L…O…W…L…Y

    I extracted your plug-in to a folder and tried to upload that thru filezilla to the plug-in section of my WP install….but nothing :(

  90. WillyPNovember 25, 2009

    Ultras, I have just started a new job (at an awesome software company called Atlassian) So, I have a bit less time now to support the plugin. In my travels I have found its better to just avoid trying to use 2 libraries at once. What I would do in your situation is find a version of the effect you are currently using with Scriptaculous/Prototype, that uses jQuery instead. Either that or find a tabSlider thing that uses Prototype. If you try and use 2 libraries at once, not only are you loading a bunch of code you don’t need to your site, but you will be in for a world of hurt anytime you do javascript on your site. So, since I dont have time to figure out the jQuery.noConflict stuff, I’m telling you to ditch the idea of using both. Anyone that wants to play with the jQuery noConflict thing, its well documented here:

  91. dazed & confusedNovember 25, 2009

    nevermind – i figured it out with old fashioned trial & error ;)

  92. MattJanuary 1, 2010

    Using the slide out set to load from the top. It works perfectly. Except on this one occasion:

    I load the page in Safari with no tabs open. Everything’s fine. Then I create a new tab. So far so good. Then I go back to my page with the pull-down and hit refresh. Then the “handle” loads 30-40px higher than its normal position, so it’s barely visible. I get a similar bug in Chrome for Mac. Anyone else seen this?

    Check it at: http://www.whamuntitled.net/simple

  93. MichaelJanuary 9, 2010

    I ran across this as I was looking for similar examples…. yours wins :) I’m having one difficulty if you can help me on this. I want to dock on the right side of the page. However, when I do this, my horizontal scroll bar disappears. Any help on this? Not that you haven’t helped a ton of people already but thought I would try. I am testing in FF 3.5 and internet 7 for now. Thanks!

  94. FloJanuary 11, 2010

    Hey guys, hey William,

    thanks for a really great jquery-plugin. I still missed the functionality for a callback-function. I wanted to load some content via jquery-ajax directly after the slider was opened.
    So I modified your plugin a little bit and hope others can benefit from this as well.

    Pls see my blog for downloading it: http://florian-simeth.de/2010/01/jquery-tab-slide-out-with-callback/

    Greetz from Munich/Germany

  95. ZachJanuary 13, 2010

    Hey, love your plugin, but I wanted to make the pane that slides out resizable (I’m using it for debugging).

    Just making the div resizeble:
    Doesn’t work because the width/height properties are only checked once. So I had to modify your code a bit by turning the settings into a function that fetched new information every time:

    var properties = function(){
    return {
    containerWidth: parseInt(obj.outerWidth(), 10) + ‘px’,
    containerHeight: parseInt(obj.outerHeight(), 10) + ‘px’,
    tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + ‘px’,
    tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + ‘px’
    Then I changed all the
    references to

    I decided to go a step further by just integrating the resizable function as a setting:

    if(settings.resizable === true){

    It works GREAT! Now I love it EVEN MORE! ;)
    Email me if you want the full code.

  96. ZachJanuary 13, 2010

    OOh. I just realized 10 seconds after posting that my update to use the resizable feature will only work if your using UI ! Sorry guys.

    So just to clarify, if you want to use the resizable feature, you’ll need to be using jQuery.UI


  97. DarioJanuary 20, 2010

    Awesome Script!! Thank you!!

  98. LalitJanuary 21, 2010


    i was made multiple tab in my page using
    this example.

    now i try to set different height width to both tab. but i couldn’t got success.

    is it possible to set different height, width to both TAB

    Thanks for help

  99. WillyPFebruary 4, 2010

    Hey all, thanks for all the comments. I am slow in responding because I got an avalanche of spam comments! I dug through and found the legit ones. I definitely need a better spam filter for wordpress. Any suggestions?

    @Matt, yeah that’s lame, looks like a bug. I am putting together a new post with an updated version of the script, Ill be sure to look into that.

    @Flo, Thank you very much for adding the callback. I will definitely incorporate that into 1.5. Nice dude….

    @Zach, wow dude, trippy…Thats cool. Ill have to try that out sometime. Do you have an example url up of that working somewhere?

    @Michael Yeah, the right side option makes you lose horizontal scrolling. Otherwise the horizontal scroll bar will always be there since the content is simply pulled over the right using a negative right css property. If anyone has a better way to do that I’d like to hear it.


  100. JohnFebruary 9, 2010

    Hi… great plugin Willy and thx for sharing it.

    I have a multiple tabs and I want every slide out panel in diferent sizes. Any Idea how to achive it?


  101. JanFebruary 15, 2010

    Love this plug in and I do see it getting some use. I was trying to display the shopping cart in this plugin, in a wordpress site. I’ve got the sidebar appear in the space, but the slide out feature isn’t working and I can’t see to see any errors. Any suggestions?
    thanks so much.

  102. Matt SFebruary 16, 2010

    I’ve managed to get this working great on my website, positioning the tab on the right hand side. I’ve also positioned it so that no matter what the size of the browser window is, it will always stick to the right hand side, unless the width of the browser is less than the width of the content, in which case it will just sit off screen as the page content has a minimum width and I don’t want the tab to sit on top of any page content. The problem I’m having though is that my horizontal scrollbar doesnt show up if the content overflows the page. I tried moving the slide tab to the left and the horizontal scrollbar shows up fine. Any ideas?

  103. Matt SFebruary 16, 2010

    Sorry, just read your previous reply which says that you do actually lose horizontal scrolling when aligning on the right. Sorry!

  104. BoboFebruary 19, 2010

    Hey, thanks so much for this really great plug-in. It was exactly was I’ve been looking for. Nice job!

    For those of you which have experienced problems with using this awesome plugin and Lightbox / jCarousel, the way to solve it is simply to put “jQuery.noConflict();” in the Lightbox or jCarousel script, after it has loaded the jquery library or just after it has loaded all the JS files.

    It worked perfect for me.

  105. BrennanFebruary 24, 2010

    Great. So great!!

    I’m learning so much from you. Thank you.

  106. VishalFebruary 25, 2010

    Hello, thanks a bunch for distributing your plugin!

    I am fairly new to jQuery and trying hard to learn, so pardon my ignorance if the answer to my question is obvious.

    I have created a slide out tab for “Search Criteria” for a website that contains an AJAX form with a combination of select boxes, text fields and buttons. One of the fields is a textbox that allows the user to select a date using the jQuery UI’s datepicker plugin. The problem is that as soon as the user selects a date from the calendar, the tab closes and the user has to click on the handle again to reopen the tab. Is there any way to make the tab stay open after the user clicks on a date?

  107. WillyPFebruary 26, 2010

    Hey yalls, Im way happy to help, but I need a url to see whats going on without asking a ton of questions. So if something isnt working, please either send me a test url that I can look at or the code zipped in an email. Thanks!

  108. janMarch 1, 2010

    Hi Willy,
    Thought I included the link,sorry about that. The tab is all the way at the bottom of the page referenced, and it’s not in the very sweet slide out form. I’m using this in a word press site and I put the code on the header page, added the css to my styles, and added the code to my template. I’m not sure what I’m missing. Thanks for any help.
    are you riding crank pedals? Hard to tell in the pict; )
    I mt bike, too.

  109. JanMarch 2, 2010

    just in case the form website thing isn’t working.


  110. YuriyMarch 3, 2010

    Thanks a lot for plugin Willy… I have a problem that I can not solve. Someone already posted something similar here but there is no answer.

    Here is my problem:
    Within the slideout tab I have a search form with jQuery datepicker. When I select a date it closes the slideout tab. I was able to figure out what the problem is but have no solution. It has to do with z-index and slideout tab closing when you click outside of it. Do you know if there is a was to keep the tab open when you click outside of it?

    Thanks in advance… Waiting to hear back from you…

  111. WillyPMarch 4, 2010

    Do you happen to have a test url for this? I am going to need to firebug this to figure it out. If you just want to hack the plugin and disable the click function that closes the tab when you click the screen, you can do that.
    Around line 176, comment out:

    But that’s not the ideal solution. I’d rather fix this the right way. If you want you can email me the url. Thanks!

  112. ThomasMarch 5, 2010

    Great plugin, thanks alot! Still having one little problem.. The tab slides out on hover, that works OK but if I move my mouse over the handle multiple times it kinda “freaks out” and it starts sliding in and out like a madman.. Do you perhaps know the solution to this problem? It would help me a lot. Thanks in advance!

  113. WillyPMarch 6, 2010

    Yup, that is pretty horrible. Haven’t fixed that yet. Don’t have a fix now, but I will work on that when I get a chance. My tip right now would be to not use onHover. I personally think its awkward on hover anyways from a usability standpoint. (when you don’t know how to fix something just say its a bad idea anyways :-)

  114. ThomasMarch 8, 2010

    Hahaha, you’re right. onClick is prolly better, I will use that then. Thanks for the reply, and keep up the good work!

  115. CarlMarch 9, 2010

    Great plugin, is it possible to have another button that will invoke the slide out?

    i.e. I want to keep my contact button on the right of my page, but I also have a contact link in my navigation, is it possible to click the contact link in my navigation to make the slider slide out?

  116. WillyPMarch 9, 2010

    Yup there is a way to do this and its really simple. In the latest version that I have not uploaded!
    I believe the code you want is on this page:

    I have not officially released this yet, but I am pretty sure its ready to go.

    Let me know.

    Basically, any link you put the class “.button” on will toggle the open/close of the slide out.

  117. WillyPMarch 9, 2010

    Its ok, I don’t recommend the use of the technique from back then, its sorta funky. Better to use the newer plugin code if possible.

  118. AndyMarch 11, 2010

    Hi Willy

    Great script mate, thanks, its a big help.

    I have but one suggestion, and its a suggestion to all developers of all code types: PLEASE make all classes and IDs absolutely unique to your plugins.

    .handle, .button are your crimes, but Ive seen worse: .html, .text, .content etc

    I suggest using something like: .slideOutHandle or .slideOutButton

    By having unique classes and ids, you make your plugin “plug in and play”, by using names that are likely to be in other plugins or our own code, your plugin becomes “Plug in and piss about for 3 hours trying to find the errors” :)

  119. IndialikeMarch 11, 2010

    Very nice and useful tutorials for web designers,
    Thanks for posting.

  120. WillyPMarch 12, 2010

    thanks! and good point. But you aren’t tied to the name .button. its actually an option you can pass in. You can use any name you wish.

  121. Matt GMarch 14, 2010

    Hi Willy,
    I am trying to insert your plugin into another jquery plugin, “Galleria,” specifically the demo_01.htm.” I am unable to make both scripts work together. Any ideas? Also, Thank You for sharing this awesome bit of code. Thanks again, Matt G.

  122. WillyPMarch 16, 2010

    Cool, I cant wait to see what you have in mind when thats done. Sounds interesting. I need to see a url of a dev server if possible, or perhaps if you want you can send me a zip file of your project to wpaoli@building58.com


    (Reminder to everyone posting for help with this code, I can’t help usually without seeing stuff in firebug and checking out whats going on myself, I dont mind helping at all, but Its hard for me if I cant see it.)

  123. MikeMarch 18, 2010


    Hope all is well. JQ novice and trying to modify the code to suit my needs…The multi-tab one looks very interesting and I might have to further modify this down the road. I posted a thread on the wordpress forums for help with little help received, to my surprise. Might you be able to add your expertise to help me accomplish this? Should be a simple fix…I just can’t seem to figure it myself. Basically, the tab slide out hides behind my main content instead of floating over it when it opens….so you can’t even see the button to close it. Here is the link to the thread which shows my code and such.

    Thanks in advance,

  124. WillyPMarch 19, 2010

    Hey mike, I believe this is just a css issue. I put z-index:3000 into the slide-out-div css and that seems to work. I responded to you on the wordpress forum that you linked to.

  125. MikeMarch 19, 2010

    Much appreciated Will. Works great! Now I just need to figure out why it hides behind my live chatroom and my personal banners (not google ones) but thats a minor issue. Thanks again!

  126. PricesMarch 21, 2010

    I was getting a “tabSlideOut is not a function” type error in Safari (on windows) and Chrome.

    The fix was simple. in the plugin file, change “$.fn.tabSlideOut” to “jQuery.fn.tabSlideOut”

    Apparantly thats all delimited and stuff, but hey, it got my slider working again!

  127. WillyPMarch 21, 2010

    Im curious, are you also importing another JS library as well as jquery?

  128. PiglooMarch 26, 2010

    Thanks for the plugin its great, you can see my use of it here: gaterestaurant.fastnet.co.uk

    I would like to make a suggestion / feature request for behaviour with javascript turned off.

    I think it would be nicer if the tab was visible in the correct positon (via css I guess) so that when clicked it would take the visitor through to a page containing the slide out content. The content of the slide out could be hidden via css (made visible via javascript if available).

    I look forward to your thoughts.

  129. JonnyApril 2, 2010


    Great plugin – so easy to use and perfect for what we needed it for: http://www.markashwell.com/


  130. CambodiaZoom WebmasterApril 5, 2010

    We are developing a googlemap search. We use tabslideout. In FF, it work fine. But in IE, it expand the page width.We are desperate. Can anyone help us out with this?


  131. WillyPApril 11, 2010

    It looks like to me you possibly have other javascript/css errors in IE on that page.The right side option does work on IE. Can you set up an example page with just the plugin working in IE to isolate the problem? Maybe some javascript you are using for the map mashup is conflicting with it.

  132. Chris BellamyApril 15, 2010

    This is a fantastic plugin! Just what I needed. A quick question – I’d like to put 3 tabs on the page, and have only one open at a time – that is, if I have a tab open, and click on another one, the first one closes back up. I was thinking I could put


    as the first line of the slideOut function in the plugin, but that didn’t work. Any ideas?

  133. WillyPApril 15, 2010

    I do have an updated version of this script that I am working on finalizing which will expose those functions as public methods. Currently though I do believe you can do what you want if you look at how I did it here for someone else that had this question:


    Please note that the js file that example uses is here:

    Its not perfect, just something I threw together for someone.

    (New version coming soon people, I just need about an hour of ‘free’ time. ) ;-)

  134. CambodiaZoom WebmasterApril 19, 2010

    you are right, WillyP. There’s some conflict with other jQuery plugin. When i isolate it, it works just fine. But the whole script is too complicated for me to sort out the problem.

  135. WillyPApril 20, 2010

    My suggestion is to not use multiple js libraries at once. Just basically not a fun thing to have to deal with ever.

  136. Kerry SkillenApril 26, 2010

    Hi there – any idea how to position the tab anywhere on the page (as in absolute?) – I want to position it over another image but when I use position:absolute, the whole thing appears and it doesn’t click out!

    Any help much appreciated! Thank u!

  137. WillyPApril 26, 2010

    Yes this is possible. See how I did it here:

    If you currently have the html for the tab at the bottom, move it inside the div that is also contains your image.

    So you need a div that conatins the image and the slide-out-tab html, on that div apply this css:

    Hope that works.

  138. JohnApril 28, 2010

    Hi willieP

    Sorry for delayed reply to your helpful response. I appreciate your script and I actually just grabbed and assembled those images all myself. Was modelling it after treehugger.com



  139. chrisMay 27, 2010

    Hello great tab plugins,
    but I have a question, is it possible to have 2 tabs on the same screen but with different content and different images?
    (I am new to Jquery … so appoligies if its a stupid question)

  140. ClayJune 17, 2010

    I have figured out how to have the tab display to the left of my content instead of the far left of the browser. SO now it looks like it is attached to the content, but I need to know how to have the tab on the left and have it slide out to the left as opposed to the right over the content? Thoughts?

  141. KarthikJuly 14, 2010

    This is great! Thanks.

    While using it I found a bug though.

    Use the tab on the right side of the page
    Have the form in the hidden position with only the tab sticking out
    Click anywhere on the page and press the right arrow key
    You can now see the entire form in the overflow area.

  142. WillyPJuly 14, 2010

    Nice catch. Yeah that sucks! ;-)

    The right side option is pretty flaky.

    I don’t have a lot of time to focus on this right now unfortunately. Does anyone have a better idea on how to get this fixed?

    I should have more time within the next couple of months to get back into this and finally release a new version.


  143. AussieAugust 20, 2010

    Great script

    Add this bit of code to allow the tab to be close programmaticly

    $.fn.tabSlideIn = function() {
    if (settings.tabLocation === ‘top’) {
    obj.animate({top:’-’ + properties.containerHeight}, settings.speed).removeClass(’open’);
    } else if (settings.tabLocation === ‘left’) {
    obj.animate({left: ‘-’ + properties.containerWidth}, settings.speed).removeClass(’open’);
    } else if (settings.tabLocation === ‘right’) {
    obj.animate({right: ‘-’ + properties.containerWidth}, settings.speed).removeClass(’open’);
    } else if (settings.tabLocation === ‘bottom’) {
    obj.animate({bottom: ‘-’ + properties.containerHeight}, settings.speed).removeClass(’open’);

  144. JayOctober 17, 2010

    Hey thanks for the nifty plugin, it works a treat! How would I go about changing the tab image upon clicking. E.g. arrows pointing right when closed to arrows pointing left when open?

    Once again thanks for your hard work :o)

  145. ThomasNovember 17, 2010

    Hey, thanks for the nice plugin! One problem though, the slide-out-div isn’t visible in Chrome… It is on the first time I load the page but after a refresh it just disappears. Cleaning up history brings it back but only the first time I load the page. My Javascript is turned on and FF and IE do show it as it should be. What could be the problem?

    Thanks in advance

  146. ChelseyNovember 17, 2010

    Installed this plug-in and it worked perfect, suddenly it disappeared. Could you email me for help please?

  147. ThomasNovember 18, 2010

    I figured out that Chrome makes my slide-out-div’s left position -296px, but it should be -232px, so it’s not visible. Matt has the same problem, anyone else? Does someone has a solution to this?

  148. EddieJanuary 12, 2011

    I am using this plugin on my site (3 tabs @ bottom). They work fine in all browsers except Opera 11, where expanding a tab leaves a trail of lines all over the tab contents so that you cannot read them

    Earlier today I happened to notice they worked fine in Opera 9; I haven’t seen how they work in 10. So somewhere in between the release of versions 9 and 11, something got chinked in Opera such that this behavior starts up.

    It’s not a show-stopper as I doubt seriously my site will get a lot of Opera users, but perfectionist that I am, I would love to understand the cause and fix for this.

  149. AmeerJanuary 19, 2011


    if slideOutOnLoad == true
    tab will not close automatically!!

    fix it by this code:
    var slideOutOnLoad = function ()
    setTimeout(slideIn, 2000);


  150. JohnJanuary 21, 2011

    Just an FYI, If you are having issues with not being able to click on your tab.. Set your z-index in the css.


    .slide-out-div {
    padding: 20px;
    width: 250px;
    background: #f2f2f2;
    border: #29216d 2px solid;
    z-index: 9999; /*– Added z-index –*/

    Thank you, for sharing your work Willy.

  151. JohnJanuary 22, 2011

    One more FYI

    If your having issues running jquery.js and jquery.min.js

    load the jquery.min.js
    and tab.js before the jquery.js


    Also my custom.js starts with:


  152. John CongdonMarch 1, 2011

    I had not looked at these comments before. I also updated this plugin with Ajax functionality.

    The one above in the comments is going to a 404 not found page. Checkout this version, it does the Ajax pull only once. This way you don’t load forms unless they are going to be used.


Add a Comment