“SlideBox” jQuery slider

A simple script which allows us to achieve an effect of a sliding box with content in it.

JavaScript

We should include jQuery framework by pointing src attribute in the script tag to those .js files.

<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>

Initialization script we place in the section.

<script type="text/javascript">
    $(function()
        {
        $("#link").click(function(event) {
        event.preventDefault();
        $(this).toggleClass("link2");
        $("#dropdown_box").slideToggle();
        });
    });
</script>

.header-banner-right this class defines height of the box in the hidden position #link this is the button element with an image which hides the content #dropdown_box this id is the box content area

HTML

Below you can see general HTML script representation:

CSS

#link {
background:url(images/button_go_box.png) no-repeat 0 0;
display:block;
height:39px;
width:39px;
z-index:180000;
margin:0 0 0 471px;
position:absolute;
}

.dropdown_box {
z-index:1;
}

.dropdown_box {
    zoom:0;
    z-index:1;
}
.all .dropdown_box {
    zoom:0;
    z-index:1;
}