Javascript

Introduction

Loops

Objects

Arrays

Fade In and Out

Light Box Plugin

Animate

Collapsible Panels

Jquery Form

Jquery Gallery

Slide Up Nav

Collapsible Panels

This tutorial requires the jquery framework. The collapsible panels can be a great platform for a portfolio website so lets have a go at making one

Start by typing the HTML

<div id="wrapper">
<div class="panel">Click me</div>
<div class="panelContent">
....
</div>
<div class="panel">Click me</div>
<div class="panelContent">
....
</div>
<div class="panel">Click me</div>
<div class="panelContent">
....
</div>
</div>

the dots represent filler text just do this bit last and put in any text you want, in the example I have used a filler text generator.

Add the CSS

body
{
background-color: #525252;
}
#wrapper
{
width: 300px;
margin: auto;
}
div.panel
{
width: 288px;
height: 18px;
background-color: #e7e7e7;
border: 1px solid #e8e8e8;
padding: 5px;
color: #2e94c9;
font-size: 12pt;
font-family: arial;
}
div.panelContent
{
width: 288px;
height: 288px;
background-color: #ededed;
border: 1px solid #dcdcdc;
display: none;
padding: 5px;
color: #666666;
}

All we our doing is just giving the panels and the content some styling to make it look nice. the width and height maybe odd numbers but its because when we total it with the padding and border it becomes the same width as the wrapper and the height I want a normal number in total.

Now add the javascript

$(document).ready(function(){
$(".panelContent:first").slideDown("slow");
$(".panel").click(function(){
$(".panelContent").slideUp("slow");
$(this).nextAll(".panelContent:first").slideDown("slow");
});
});

When the document is ready the the first panelContent class slides down. When the panel is clicked all panelContent classes slide up and then based upon which is pressed a panelContent class slides down. This works by finding the next panelContent class from the panel clicked.