Hi

I wonder if anyone can help men out.

I need to run different scrollable objects concurrently. And it's not working for me.
Actually if I change the class name away from scrollable it won't run at all.

I have the scrollers set in a horizontal accordion.
Here is my prototype page (it still just in the prototyping stage)
http://www.communica.co.nz/concepts/prototyping/

As you can see the tab-horizontal accordion works.
But only the "capacity scroller works"?

Why does the others not work? and why am I forced to use a class of scrollable? Even if the is only one scroller I can not change the class.

Thanks

Gareth

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>jQuery Tools standalone demo</title>
	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
	<!-- accordion styling -->	
	<link rel="stylesheet" type="text/css" href="tabs-accordion-horizontal.css"/> 
	<link rel="stylesheet" type="text/css" href="scrollable-horizontal.css" />
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-buttons.css" />
</head>
<body> 	
<!-- accordion root -->
<div id="accordion">
	<!-- accordion header #1 -->

	<span class="accord_trigger">Interior</span>
	<div style="width:320px;" class="accord-content">
		<a class="prev browse left"></a>
		<div class="interior">	 
			<div class="items">
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_01.png" alt="feature_image_01" width="50" height="50" />
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_02.png" alt="feature_image_02" width="50" height="50" />
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_03.png" alt="feature_image_03" width="50" height="50" />
			</div>
		</div>
		<a class="next browse right"></a>
		<script>$(".interior").scrollable();</script>	</div>
	
	<span class="accord_trigger">Exterior</span>
	<div class="accord-content">
		<a class="prev browse left"></a>
		<div class="exterior">	 
			<div class="items">
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_01.png" alt="feature_image_01" width="50" height="50" />
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_02.png" alt="feature_image_02" width="50" height="50" />
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_03.png" alt="feature_image_03" width="50" height="50" />
			</div>
		</div>
		<a class="next browse right"></a>
		<script>$(".exterior").scrollable();</script>
	</div>
	
	<span class="accord_trigger">Capacity</span>
	<div class="accord-content">
		<a class="prev browse left"></a>
		<div class="scrollable">	 
			<div class="items">
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_01.png" alt="feature_image_01" width="50" height="50" />
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_02.png" alt="feature_image_02" width="50" height="50" />
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_03.png" alt="feature_image_03" width="50" height="50" />
			</div>
		</div>
		<a class="next browse right"></a>
		<script>$(".scrollable").scrollable();</script>
	</div>
		
	<span class="accord_trigger">Safety</span>
	<div class="accord-content">
		<a class="prev browse left"></a>
		<div class="safety">	 
			<div class="items">
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_01.png" alt="feature_image_01" width="50" height="50" />
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_02.png" alt="feature_image_02" width="50" height="50" />
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_03.png" alt="feature_image_03" width="50" height="50" />
			</div>
		</div>
		<a class="next browse right"></a>
		<script>$(".safety").scrollable();</script>	</div>

	<span class="accord_trigger">Awards</span>
	<div class="accord-content">
		<a class="prev browse left"></a>
		<div class="awards">	 
			<div class="items">
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_01.png" alt="feature_image_01" width="50" height="50" />
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_02.png" alt="feature_image_02" width="50" height="50" />
				<img src="http://www.communica.co.nz/concepts/kmsdata.co.nz/images/feature_image_03.png" alt="feature_image_03" width="50" height="50" />
			</div>
		</div>
		<a class="next browse right"></a>
		<script>$(".awards").scrollable();</script>	</div>

</div>
<!-- activate tabs with JavaScript -->

<script>
$("#accordion").tabs("#accordion div.accord-content", {
	tabs: 'span.accord_trigger"', 
	effect: 'horizontal'
});
</script>
</body>
</html>