Blog

26
March 18th, 2011
jquery

Horizontal Sliding Panel v2

This is a follow up post from my popular jQuery horizontal sliding panel which believe it or not gets over 500 hits a month! Many people recently have been saying it doesn’t work with the latest version of jQuery (1.5.1) (1.7.0), I finally got a moment to get it fixed so people can continue to enjoy it.


Click here to view the demo


OK so the HTML stays the same as the previous version of the sliding panel.

The HTML

1
2
3
4
5
6
7
8
9
10

<div id="panel"> <!--the hidden panel -->
       <div class="content">
              <!--insert your content here -->
       </div>	
</div>
<!--if javascript is disabled use this link-->
	<a href="/about.html" onclick="return()">
              <div id="tab"> <!-- this will activate your panel. -->
              </div> 
         </a>

We make one change to the CSS in the panel styling.

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#tab {
	width:50px;
	height:150px;
	position:fixed;
	left:0px;
	top:100px;
	display:block;
	cursor:pointer;
}
#panel {
        position:fixed;
	left:0px;
	top:50px;
	background-color:#999999;
	height:500px;
	width:0;/*new line*/
}
#panel .content {
	width:290px;
	margin-left:70px;
}

The Jquery

Really simple change to the jQuery, just removing the #panel ID from the first line and that’s all we are changing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(document).ready(function(){
 
   $(".content").hide(); //updated line, removing the #panel ID.
 
   $('#tab').toggle(function(){ //adding a toggle function to the #tab
      $('#panel').stop().animate({width:"400px", opacity:0.8}, 500, function() {//sliding the #panel to 400px
	  $('.content').fadeIn('slow'); //slides the content into view.
	  });  
   },
   function(){ //when the #tab is next cliked
   $('.content').fadeOut('slow', function() { //fade out the content 
      $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0
	  });
   });
 
});

I hope this fixed peoples problems with the new jQuery. Let me know if you have any trouble.

design
, , ,

Related Posts

2012 London logo
There's been many mixed opinions on the New London 2012 logo, to be honest ...
Your best is never seen...
Just a small post, say you put 5 concepts together, i can guarantee that yo...
Indent an Impression
The days of flat/block color text are dead you can apply many effects by ju...

26 Comments

  1. Will D. White
    March 24, 2011

    I spent 4 hours working with a jQuery plugin that was supposed to make adding a quick slide-out menu easy. It not only didn’t allow for more than one slide-out at a time, it covered any links below it as if the content was always slid out – even when it was hidden.

    Then I ran across this post. In 20 minutes I had the slider I needed styled and up and running – no bugs.

    Thanks for a great walk-through.

  2. Carl P.
    May 5, 2011

    This is awesome. Is there anyway to make the panel slide from right to left on first click, the opposite of what it does now?

  3. admin
    May 12, 2011

    Hi Carl, I replied via twitter but just for people wondering the same thing I will post my answer here. To make it slide from the right not the left Just edit the CSS positioning, where it has left:0; in #panel and #tab change left for right. Hope that’s what your after

  4. Gracy
    May 17, 2011

    Just perfect! Thank you!

  5. Adek_Graphs
    May 24, 2011

    first of all, nice plugin you have here, and i want to ask you how to put the tab on top of the page instead of on the left, and the panel slides from top to bottom, thanks,…

  6. Adek_Graphs
    May 24, 2011

    forget about what i asked you before, i managed to do it myself, and works perfectly, you have a simple scripts with an advance results, many many thanks for that,…

  7. Domen
    July 20, 2011

    Great plugin man!

    Only one problem, doesn’t work on jQuery 1.6.2. Anyone got fix for that?

  8. Domen
    July 20, 2011

    Heh Ignore my last post! It works perfectly! :) Thank you!

  9. sylvester
    July 25, 2011

    i want to ask you how to put the tab on top of the page instead of on the left, and the panel slides from top to bottom. thank you.

  10. glenn geiger
    July 26, 2011

    Thank you very much for this! I couldn’t figure out how to get the div to slide horizontally (meaning across the horizon). Searches for this were frustrating. Very well done – simple and effective.

    Small update for me: remove the .hide line altogether and add display:none to the CSS for that element.

  11. Yiannis
    August 10, 2011

    Is there any way to have multiple panels on the same page, It’s working brilliantly apart from the second panel’s content displaying in the tab for the first.

  12. Yiannis
    August 10, 2011

    Don’t worry, stupidity on my part.

  13. Ryan
    October 12, 2011

    I can’t seem to get this to work on 1.6.2 which is really what I need due to some current conflicts. Domen mentioned he got it to work and I was looking for any suggestions. BTW, it works perfectly using 1.5.1.

    Thanks for your help!

  14. admin
    October 12, 2011

    @Ryan, I havent tried it with 1.6.2, theres no reason why it shouldn’t work. I will try and take a look as soon as i get a free second.

  15. Gibson
    October 13, 2011

    Is there a way to cause the content panel to retract if the user clicks anywhere outside of #panel/.content? ie. clicking the panel again would still cause the panel to retract, but clicking anywhere else outside of the open panel will also cause the panel to retract?

  16. admin
    October 13, 2011

    @gibson you will have to change the line, $(‘#tab, *insert id or class here*’).toggle(function() so when you click on the main did it closes (by main tab i mean container div or body). I havent tested this but you may need to set a conditional statement to say if the tab is open and the container div is clicked close it else do nothing (meaning if the tab is shut do nothing.)

  17. Marylka
    October 30, 2011

    How to do that, the button “about me” pushed together with the panel as it is here: http://jorenrapini.com/blog/css/jquery-validation-contact-form-with-modal-slide-in-transition

    Thank you for your help!

  18. Tim Hartke
    November 2, 2011

    Hi. Thanks for the great post! I have one question. What route would one take if they wanted to have the panel expanded on page load, and then toggle it.

  19. admin
    November 2, 2011

    Essentially you would have to do exactly the same thing but in reverse, so in the css you would make the panel 400px wide instead of 0px.
    Then in the jQuery you would take out the line $(“.content”).hide(); //updated line, removing the #panel ID. this will make the panel visible on load.
    Now switch this line $(‘#panel’).stop().animate({width:”400px”, opacity:0.8}, 500, function() {//sliding the #panel to 400px with $(‘#panel’).stop().animate({width:”0″, opacity:0.1}, 500); //slide the #panel back to a width of 0.

    Hope this makes sense. I haven’t tested it but as the panel is visible on load you what the first click to animate the width to 0px then the second time its clicked make it 400px currently the panel is hidden so the first click animates it to 400px and the second makes it 0px.

  20. anathematism
    November 13, 2011

    Great plugin. As Domen/Ryan mentioned, I’m unable to make it work with Jquery 1.6.2. Can anyone check, and suggest a fix.

    Thanks.

  21. admin
    November 29, 2011

    Just took a look at the code and it seems to work using 1.7.0 view demo at the top of the page, i think it was a styling issue more then a jQuery issue.

  22. Danielle
    December 14, 2011

    I am having trouble getting this to work at all. I get the tab to show up and the content but that’s all. No JQuery functionality. Nothing is even hidden at the start. It’s just a box and some text next to it.

  23. Danielle
    December 14, 2011

    Nevermind I figured it out. It would have been helpful to include your jquery link. I liked it to the jquery library I have downloaded and it wouldn’t work. So I looked at your demo page’s source code and saw you linking to Google. Works great! Thank you!

  24. V
    January 12, 2012

    Im prettey much newbie in this but when i click on the red tab says to me missing page so my question is what is that /about.html ????

  25. David G
    January 28, 2012

    Hi, excellent work.

    How could include a button in the #panel is closed to do the same?

  26. admin
    January 29, 2012

    You will need to include a button inside and give it an id then in the jQuery you would add in something like

    $(‘#button-id’).click(function(){
    $(‘#panel’).animate({width:”0″, opacity:0.1}, 500);
    });

    You may have to play with this as i haven’t tested it.

Leave a comment