Accordion Used As Slider Navigation

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<title>Untitled Document</title>
    
<link type="text/css" rel="stylesheet" href="Untitled-2.css" />
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
    
<script type="text/javascript">
    var itemWidth = 400;

$('#accordion> h3').click(function(){
        var index = ($('h3').index(this));
        $('#container').scrollTo((index * itemWidth).toString() + 'px', 800 );
});

$(document).ready(function(){
    $('#container').width($(document).width()-10);
    $( "#accordion" ).accordion({fillSpace: true});
});
</script>
</head>

<body>

<div id="navigation">
<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc.
        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit.
        </p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
      ...

CSS

#accordion
{
    width:200px;
    font-size:12px;
}

#navigation
{
    position:absolute;
    top:10px;
    left:15px;
    height:300px;
    cursor:pointer;
}

#container
{
    width:600px;
    overflow:hidden;
}

#items
{
    width:2000px;
}

.item
{
    width:400px;
    height:300px;
    float:left;
    background-color:#a9a9a9;
    text-align:left;
}

JavaScript

var itemWidth = 400;

$('#accordion> h3').click(function(){
        var index = ($('h3').index(this));
        $('#container').scrollTo((index * itemWidth).toString() + 'px', 800 );
});

$(document).ready(function(){
    $('#container').width($(document).width()-10);
    $( "#accordion" ).accordion({fillSpace: true});
});