A while ago I wrote an article showing how you could build a basic sliding div element using the JQuery library. I have had many questions over that post and I have decided to post a full HTML page with the sliding div example.
You will need to download the JQuery library – you can get it from http://www.jQuery.com
If copying and pasting watch the ” characters 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery: Collapsible Menu</title>
<script type="text/javascript" src="js/JQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").mouseover(function(){
$("#div2").slideDown('fast');
});
$("#div1").mouseout(function(){
$("#div2").slideUp('fast');
});
$("#div3").mouseover(function(){
$("#div4").slideDown('fast');
});
$("#div3").mouseout(function(){
$("#div4").slideUp('fast');
});
});
</script>
</head>
<body>
<div id="Nav" style="width:200px;">
<div id="div1" style="border: solid 1px silver;">Navigation 1</div>
<div style="border:solid 1px white; height:5px;"></div>
<div id="div2" style="display:none;background-color:pink;">Welcome to the Navigation 1 area </div>
<div id="div3" style="border: solid 1px silver;">Navigation 2</div>
<div id="div4" style="display:none;background-color:pink;">Welcome to the Navigation 2 area </div>
</div>
</body>
</html>
19 March, 2007 at 11:01 am |
[...] CSS manipulation with jQuery – sliding div elements Please note, I have provided a full example of this in a later post http://cgaskell.wordpress.com/2007/03/19/sliding-div-elements-a-full-example-follow-up/ [...]
4 April, 2007 at 12:08 pm |
Hi,
This is great stuff!! JQuery – small, easy, powerful.
Unfortunately when I use JQuery in a web page it’s takes around 15 seconds to open in IE (version 7.0). With Firefox and Opera it’s instant.
Also get delay with example code above. Can anyone help?
Thanks, Mike
21 May, 2007 at 6:02 pm |
I wrote a collapsible using a dropmenu using dd.eq(0) values instead.
Check it out here.
http://www.2whoa.com/jquery/collapsibleAtlantic.jsp
26 February, 2008 at 9:41 pm |
Good stuff! Thank you:)
4 January, 2009 at 3:18 pm |
airfare discounts airfare
airflights airline airline airfare
services airline ticket
bargain airfare best airfares
budget flights business class
air fare cheap air fares cheap
fares cheap flight cheap
flights london cheap flights
flight cheapest flights
airline discount fares discount
air fare discounted airfare
flight to flight to orlando
airfare free flights go airlines
airfares inexpensive airline
tickets last minute flight last
low price airfare lowest air fare
way flights online airfare plane
airlines london flights
flight flight bookings
flight booking air
flight reservations cheap
to amsterdam flights to la flights to
air tickets plane tickets airways
airline tickets cheap ticket
14 April, 2009 at 3:17 pm |
I’ll give this a try shortly
Thank you for the script.
K.