simple jquery accordian code not working

I have a jquery accordian with 5 different colors, see link http://www.photorestorationexpert.co.uk/testFolder/indexCb1Accordian.html. Need an explanation as to why it is not working as I have no idea why. When I click on the Welcome slice, it doesn't seem to slide down revealing the content This is the jquery code:

$(document).ready(function() {
   $('#va-accordion .va-content').hide();
   $('.va-slice').click(function(){
           $('#va-accordion .va-content').slideUp();
           $(this).parent().next().slideDown();
           return false;
   });

});

Here is the html to the above code:

<div id="va-accordion">     
<div class="va-slice va-slice-1">
<h2 class="va-heading">Welcome</h2>
<div class="va-content">Nam facilisis convallis elit ac.</div>  
</div>

<div class="va-slice va-slice-2">
<h2 class="va-heading">About</h2>
<div class="va-content"></div>  
</div>

<div class="va-slice va-slice-3">
<h2 class="va-heading">What To Expect</h2>
<div class="va-content"></div>  
</div>

<div class="va-slice va-slice-4">
<h2 class="va-heading">Prices</h2>
<div class="va-content"></div> 开发者_JAVA百科 
</div>

<div class="va-slice va-slice-5">
<h2 class="va-heading">Contact</h2>
<div class="va-content"></div>  
</div>

I don't know for what exact purpose you are using this code but might I suggest using jQuery UI?

Check it out here http://jqueryui.com/.

There is an in-built accordion widget which takes like 3 seconds to set up: http://jqueryui.com/demos/accordion/

<script>
$(function() {
    $( "#accordion" ).accordion();
});
</script>

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os.   </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os.   </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os.          </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os.
    </div>
</div>

Works like a charm. If you think this doesn't help then feel free to let me know, we can check your code. Cheers!

Just in case you still wish to use your custom code then this is the correct code:

$(document).ready(function() {
   $('#va-accordion .va-content').hide();
   $('.va-heading').click(function(){
           $('#va-accordion .va-content').slideUp();
           $(this).next().slideDown();
           return false;
   });
});

(you were binding the click event to an entire section in the accordion, ie heading + content and when you were sliding down, it was an entire 'va-slice' which is already showing since you only hid the 'va-content'. jQuery was getting confused since the slide function works like toggle() which defaults to 'true' if any part of the target DOM object is visible already.

Good luck!

I just noticed you're missing the final div tag that would close the overall accordian div

...
    <div class="va-slice va-slice-5">
         <h2 class="va-heading">Contact</h2>
    <div class="va-content"></div>  
</div>
</div> // <-- need one more to close the whole accordian out 

When you are using "slideDown", you are doing it on next item of your parent, that is, the next tag after "va-accordion" DIV.

ps. Why you hide "#va-accordion .va-content", and after each click you also slideUp it?

Had a look at jquery ui & found it a bit confusing at first but I think I need to look into it further but for the time being will use the code I posted. I think I understand your explanation, you're saying that I was binding the click event to an entire section (va-slice) which I shouldn't have. Within the va-slice I have the heading & content & I should only be hiding the content & not the whole section (va-slice). Can I put va-slice-1, va-slice-2, va-slice-3, va-slice-4, va-slice-5 in the .click(function() eg

$('.va-slice-1').click(function()

If not wny, is it because it is part of 'va-slice'

It was also pointed out to me that in the css for the 'va-slice' I should take out the height as it wasn't showing all of the content

va-slice{
cursor:pointer;
margin:0 auto;
width:725px;
overflow:hidden;
    height:50px;
}

One more thing, the content jumps when you click on the heading & it slides down see here http://www.photorestorationexpert.co.uk/testFolder/indexCb1Accordian.html