Welcome to Blogging for SEO

Jquery Collapsing Divs

Author Jeffh

I worked on a web build today, and threw in some collapsing divs to show and hide the contact form. The website is for an electrician company based in northern california and is a great example of how to take a website to the next level, without alot of work.

Once you have jquery installed, simply link to it through your html file. Now link to a blank js file and start writing your own scripts based on the functionality of jquery.

Here is the code I used.

$(document).ready(function() {

$(’#contactBody’).hide();
$(’#contactForm’).hide();

$(’a#clickShow’).click(function() {
$(’#contactBody’).slideDown(500);
$(’#contactForm’).slideDown(650);
$(’#contentBody’).slideUp(500);
//$(’#footer’).slideUp(’fast’);
return false;
});

$(’a#clickHide’).click(function() {
$(’#contactBody’).slideUp(600);
$(’#contactForm’).slideUp(450);
$(’#contentBody’).slideDown(600);
//$(’#footer’).slideDown(’fast’);
return false;
});
});

Where #contactBody and #contactForm are the two divs I am working with. And #clickHide and #clickShow are the ids of the links that… you guessed it, open and close the divs. The numbers represent the speed at which the div opens/closes. See it is simple! Try it our for yourself.