Hi all, just starting to experiment with a bit of jquery using a slideUp slideDown function.

I've managed to get it working no preoblem in Safari and firefox but in IE the slide up/down doesn't work it just show's all of the text, just wondered if anyone can help me?

Here's the page: http://www.bazhodson.co.uk/about.html.

 

Here's the html:

<div id="col2_middle">

<h1>SERVICES ON OFFER</h1>

<div class="ourServicesTop">

</div>

<div class="ourServicesMain">

<h3><img src="images/buttons/button.png" alt="button"/> Web Design</h3>

<div>

Good website design isn't just about how your site looks. It needs to be clear, easy to navigate as well as being informative to ensure a good user experience. With this in mind I approach every project using a combination of eye-catching imagery and sound usability principals.

All of my sites are built to the latest Web Industry Standards which helps to create excellent cross-browser compatibility, improves your sites accessability to all types of users, and helps increase your search engine rankings too.

</div>

 

<h3><img src="images/buttons/button.png" alt="button"/> Web Development</h3>

<div>

Whether you require a Standard Static Website, a Content Management System, an eCommerce website or an online Blog, I can build the web application for you. I'll work closely with you to find out exactly what it is you want your application to achieve, and then use my skills and experience to put it together and make it work to accomplish your goals.

</div>

 

<h3><img src="images/buttons/button.png" alt="button"/> Web Maintenance</h3>

<div>

It's all well and good having a website designed or developed and placed online for you, in our fast moving society many things can change or become out of date in no time at all. If your website falls behind or hasn't got the most up to date relevant information on it, you may start to loose visitors. I can keep your website up to date by making one-off alterations charged at an houly rate or can set up a maintenance contract where I make unlimited alterations for a monthly fee.

</div>

</div>

<div class="ourServicesBottom">

</div>

</div>

 

The CSS:

.ourServicesTop{

width: 222px;

height: 0;

margin: 0;

}

 

.ourServicesMain{

width: 220px;

margin:0px;

position: relative;

}

 

.ourServicesMain h3{

margin: 0;

padding: 0.25em;

border-bottom: 1px solid #fff;

}

 

.ourServicesMain div{

padding: .5em .25em;

}

 

.ourServicesBottom{

margin-top: 0px;

width: 220px;

height: 5px;

}

 

and the javascript:

$(document).ready(function() {

$('div.ourServicesMain> div:gt(0)').hide();

$('div.ourServicesMain> h3').click(function() {

$(this).next('div:hidden').slideDown('fast')

.siblings('div:visible').slideUp('fast');

});

});

I had an ie7 jQuery problem yesterday, it was to do with a comma in my syntax. Hopefully someone who knows a bit more than me will come along and help.

Cheers Russ, I'll go back over it and see if I can find any random comma's.