Hi all,

I am in need of help for an issue that has been bugging me for ages. I am not great with javascript but from google etc I have partly created what I want.

Here is the code:-

HTML:
HTML Code:
<div class="wrapper">	
    <div class="myslider">
        <ul class="slider">
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="1">
            	<div class="info">
                	<p>I am wine information</p>
                </div>
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="2">
            	<div class="info">
                	<p>I am wine information</p>
                </div>
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="3">
            	<div class="info">
                	<p>I am wine information</p>
                </div> 
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="4">
            	<div class="info">
                	<p>I am wine information</p>
                </div>
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="5">
            	<div class="info">
                	<p>I am wine information</p>
                </div>
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="6">
            	<div class="info">
                	<p>I am wine information</p>
                </div>
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="7">
            	<div class="info">
                	<p>I am wine information</p>
                </div>
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="8">
            	<div class="info">
                	<p>I am wine information</p>
                </div>
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="9" >
            	<div class="info">
                	<p>I am wine information</p>
                </div>    
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="10">
            	<div class="info">
                	<p>I am wine information</p>
                </div>
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="10">
            	<div class="info">
                	<p>I am wine information</p>
                </div>
            </li>
            <li>
            	<img src="assets/img/shop/redwine/bottle.png" alt="12">
            	<div class="info">
                	<p>I am wine information</p>
                </div>
            </li>
        </ul>
        <a href="#" class="previous">Previous</a>
        <a href="#" class="next">Next</a>
        <div class="clear"></div>
    </div>
</div>
Code:
.wrapper
{
	width:850px;
	margin:0 auto;
}
.myslider
{
	width: 850px;
	height: 451px;
	overflow: hidden;
	position: relative;
}
ul.slider li 
{ 
	overflow:hidden; 
	float:left; 
	height:451px; 
	margin:0; 
	cursor:pointer; 
}
ul.slider li img
{
	float:left;
}
ul.slider li .info
{
	display:none;
	float:left;
	margin:150px 20px 0 20px;
	color:#fff;
	background:#f00;
}
.myslider .previous 
{
	position:absolute;
	top:0;
	left:0px;
	width: 100px;
	color: #fff;
	height: 30px;
	margin-top: 10px;
	background: #f00;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.myslider .next 
{
	position:absolute;
	top:0;
	right:0px;
	width: 100px;
	color: #fff;
	height: 30px;
	margin-top: 10px;
	background: #f00;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
jQuery
Code:
$(document).ready(function() {
	$('li').bind({
		click: function() {
		  $('li').stop().animate({'width':'60px'},600);
		  $(this).stop().animate({'width':'420px'},600); // Width of slideout box
		  $('.info').css('display','block');
		},
	});

});
The accordion part works perfect but what I now want to do is make the next and previous buttons work. So it will slide more wines in one by one per click. So you only ever have a total of 7 showing. But there are lots hidden then need to slide in then you click next. The you can click on the wine and it shows more info (the accordion part of the script in action).

Any ideas?

I am so close yet so far...

Thank you,