Sliding Boxes using jQuery

1 comments - Post a comment

Popular JavaScript framework jQuery has caught my attention just a month ago when I felt strong need to expand my web dev knowledge beyond XHTML / CSS. Surprisingly after one month, I still haven't heard any negative opinion on jQuery - none, and I'm on Twitter search stream every day.

Start was easy because framework's home page is full of tutorials, examples and links to external blogs. Community around it is very strong and is growing rapidly. So, jQuery is THE right choice. After basic syntax and methods learning first thing is to write some code, my own library to use in future projects. Among few effects one is good enough to share - sliding boxes effect.

This is very basic jQuery effect. It uses only 6 lines of code, but I find it to be useful for some website layouts design, specially magazine style templates. It can also be used as sidebar navigation.

We will use only one click function wrapped inside DOM ready function:

$(document).ready(function() {
... // click function here
});


We will use separate divs for boxes. To make difference with other, not sliding divs, we'll use class slidingBox:


$(".slidingBox").click(function() {
// effects here
});


All that's left are sliding jQuery command. Box content has two parts. First one is inside paragraph that is always visible, 'ptitle' class and second part is paragraph hidden by default and visible when clicked inside box, 'entirePost' class. We use this parameter to animate only currently clicked box. Here is final code:


$(this).find("p.entirePost:visible").slideUp("normal");
$(this).find("p.entirePost:hidden").slideDown("normal");


We have finished with jQuery code! Just few lines of code and we are done. Some css styling must take place including important display:hidden property within 'ptitle' class.


div.slidingBox {
color: #41505E;
padding: 1px;
width: 300px;
background-color: #DFE0AF;
border: 1px solid #569492;
}
p.ptitle {
text-align: center;
font-size: 1.2em;
}
p.entirePost {
display: none;
padding: 10px;
}


sliding boxes jQuery example
You can also easily change slideUp with fadeOut and slideDown with fadeIn, leave everything else the same and you have new Fading Boxes jQuery Example. Sweet!


download source code


AddThis Social Bookmark Button

This Post has 1 Comment Add your own!
Abhisek - 19 December 2008 at 16:59

nice tutorial. but i'd like to make a point here. the padding doesn't make the sliding smoother. i'd recommend to create an inner div and then apply padding. this makes the sliding smoother.

Post a Comment