Make sure that you also include the jQuery library before you add the jquery code. Apart from that the code in the tutorial is all that is required to create the demo horizontal accordion

Apologies you actually want the last one showing but the content doesnt – correct?

You need to set the active CSS to the same width as your animation:

#accordion li.active {
width: 810px;
}

The current code is actually correct as the last li tag is the one showing by default. Didnt see it earlier but you need to change it to the following to get the first tag:

activeItem = $("#accordion li:first");

Thanks though!

You need to change the selector to match your accordion.

Change:

activeItem = $("#h-accordion li:last");

To:

activeItem = $("#accordion li:last");

http://www.icodeinpink.com/valleyvision

Make sure that you have the first 2 lines of jQuery:

activeItem = $("#h-accordion li:first");
$(activeItem).addClass('active');

and the CSS rule:

#h-accordion li.active {
width: 450px;
}

If the above code is included then the accordion should automatically open the first panel on page load

The accordion contents can be anything. If you want to identify the section labels separately you can either give them a class name and use this in the CSS or apply the labels as background images to the panels

Thanks!

$(“#accordion li”).hover(function(){
$(activeItem).animate({width: “50px”}, {duration:300, queue:false});
$(this).animate({width: “335px”}, {duration:300, queue:false});
activeItem = this;
});

This problem occurs if the widths of the horizontal accordion items are not set correctly.

In your CSS you need to set the width of the active item to be the full width of the horizontal accordion minus the total widths of the inactive items. So based on your example of total width 750px and 8 sections at 44px wide, the active section should be set to 442px.

#accordion li.active {
width: 442px;
}

The jquery settings would then be:

$(activeItem).animate({width: "43px"}, {duration:300, queue:false});
$(this).animate({width: "442px"}, {duration:300, queue:false});

Its caused by having a fixed height combined with the overflow: hidden. I suggest trying to remove the overflow rule

Here’s the css I’m using
#accordion {
list-style: none;
margin: 8px 0px 0px 8px;
padding: 0;
height: 334px;
width: 750px;
overflow: hidden;
background:#fff;}

#accordion li {
float: left;
border-left:
display: block;
height: 350px;
width: 43px;
padding: 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}

#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: 0px 0 0;
}

#accordion li.active {
width: 43px;
}

and the html

Section 1 Header
Job 1
Job 2
Job 3

Section 2 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

Section 3 Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

Dont understand the question sorry.

<li>
    <img src="sitegfx/tab_webdesign.png" width="50" height="300" class="tab" alt="Web Design" title="Web Design" border="0" />
    <div class="thumbnail"><a href="http://x.com"><img src="x.jpg" width="50" height="50" border="1" ></a></div>
</li>

[text] [/text]

so it will show. Thanks

$(document).ready(function () {
activeItem = $(“#accordion li:first”);
$(activeItem).addClass(‘active’);
$(“#accordion > li”).hover(function(){
$(activeItem).animate({width: “50px”}, {duration:500, queue:false});
$(this).animate({width: “594px”}, {duration:500, queue:false});
activeItem = this;
});
});

$("#accordion > li").hover(function(){
    $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
    $(this).animate({width: "450px"}, {duration:300, queue:false});
    activeItem = this;
});