Build a nice sliding help section using jQuery

For any moderately complex web application a help section is mandatory. Most of us rely on displaying the help in a popup or a different window. One other interesting way is to display the help section beneath the main window, which then slides to display the help section below.

PageSlide is a jQuery plugin which slides a webpage over to reveal an additional interaction pane; this provides an additional browser real-estate within which you can display extra content – a contextual help page for example.


We start with a simple HTML5 document that will be the backbone of this example.


jQuery PageSlide Demo

PageSlide Basic Demo

Below are a couple examples of how the plugin works:

Nothing out of the ordinary here. We create some default style, load the stylesheet for the Page Slider, and JavaScript at the end. The .help class along with the href tag will link to the PageSlider. Once the main page slides, we load additional content from a secondary page into the new section. The sample secondary page is given below.

Secondary page

The secondary page is shown below.


Application Help

This is an example of a PageSlide loading content into an iframe. Click on the main page to close the slide.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

PageSlide jQuery kickin

Finally we add the following line to the end of the index.html document. This triggers the page slide into action, revealing the “supposedly” hidden content frame.


By default the page slides to the ‘right’, but you can slide it to the ‘left’ with additional parameters.



You can use PageSlide to display additional help, to show application options or settings, or any other content that you wish to display in the same browser window.

Download Demo files
Downloads : [downloadcounter(page-slide)] / File size : [downloadsize(page-slide)]

2 thoughts to “Build a nice sliding help section using jQuery”

Comments are closed.