Event: September #oshtweetup

Join the Blue Door Consulting team and fellow Fox Valley-area tweeps at the September tweetup in Oshkosh. Details below! ...

jQuery Left Right Side Scroll

In this post, Bee shows you how to create a cool sliding panel effect using jQuery...


I have wanted to learn how to use jQuery for a while now so that I could add interactive and visually appealing features into some of the Web projects I’ve been working on. I haven’t had the time to really dive into using jQuery on a wide scale but I have begun to adapt bits and pieces into areas that could use a little refresh, like toggling divs and hover effects.

I’ve seen many of the jQuery sliding panel tutorials online before and have wanted to understand how they worked. I think visually, they look pretty nice, so I finally decided to take some time and went through a tutorial online.

The one that I chose to look through is called jQuery Side Scroll by Scriptygoddess. jQuery SideScroll has three sliding panels that slide from right to left. Each panel slides into the container, by sliding over the previous panel.


I thought this was interesting because most of the scrolling panel tutorials I’ve seen usually went up or down and only involved one panel. After finishing the tutorial, I decided that I wanted to create something that I haven’t seen done before. Using the techniques learned from this tutorial, I expanded on this concept and built one that scrolled both left and right – with a twist.

My idea was to have three main panels: left, right and center. The panels left and right represent two main subjects and center panel would contain the initial main text.












Upon clicking a link, a new panel would slide out from under one of the subject panel and cover the center and either the left or right panel.

I wanted three content panels under each subject, so there would be a total of nine panels in all.
Here is how the all the panels would be situated:

Great, now that you’ve gotten an idea of what I’m trying to achieve, let’s get our hands dirty with jQuery. I’m not going to go through the HTML markup and CSS; you can take a look at the demo of jQuery Left Right Side Scroll and view the source page. Instead, we are going to look at the jQuery codes needed to make the magic happen.

I have commented on every line of code so that it is easy for you to understand what each line does (green texts are comments). If you have any questions regarding the code below, please post a comment with your question.

That pretty much covers it. Again, check out the demo of jQuery Left Right Side Scroll to see how it works. You can also view the page source to see the HTML and CSS needed to put it all together. Please feel free to change anything you would like to make this fit your next project.