Feature Complete jQuery Slide Out Info Bar

The bar used jQuery to hide itself until someone click a small question mark on the top left of the page.

The box contains several drop down boxes which house info such as FAQs, Contact form, about us page and a few links.

Now to show you how it works.


First the jQuery

On page load the jQuery hides everything except a small image of a question mark on the top left side of the page. When a user clicks this image a box slides out (Like the image above). This box contains 4 links which when click will slide down and display the content within them.

Here is the actual jQuery :

Author     : Dave Earley
Author Url : http://Dave-Earley.com
Date       : 20th March 2010

$(document).ready(function() {

$('#menu ul').hide();

$('#menu li a').click(function() {




function() {
$('.box_main').show( function() {
width: '300'
}, 500);
$('#box_img').attr("src", "close.png");


function() {
width: "0"
}, 500, function() {
$('#box_img').attr("src", "qm.png");




So there you have it, a nice jquery side bar to help users on your website.

Leave a comment