CART SLIDETOGGLE ITEM DISPLAY

by bizamajig

HTML

<div id="rod-contain">
<ul class="rod-tall">
<div class="rod-inner">
<ul>
    <li class="rod-class"><h2>All Water</h2></li>
    <li class="rod-list">
        <ul>
        <div class="desc-box">
            <li class="rod-desc"><span class="desc">Our All Water rods are built for fishing across a wide range of fisheries.</span>
                <ul class="model"> 
                        <li><a href="#"><h3>TCX Series</h3></a></li>
                        <li><a href="#"><h3>One Series</h3></a></li>
                        <li><a href="#"><h3>VXP Series</h3></a></li>
                        <li><a href="#"><h3>Flight Series</h3></a></li>
                        <li><a href="#"><h3>Vantage Series</h3></a></li>
                </ul>        
            </li>
            </div>
        </ul>
    </li>
    
    <li class="rod-img"><span class="one"><a href="#">Sage One</a></span></li>
    </div>
</ul>

<ul class="rod-tall">
<div class="rod-inner">
    <li class="rod-class"><h2>Freshwater</h2></li>
    <li class="rod-list">
        <ul>
            <div class="desc-box">
            <li class="rod-desc"><span class="desc">Our Freshwater rods are perfect for everything from spring creeks to large freestone rivers.</span> 
                <ul class="model">
                    <li><a href="#"><h3>TXL-F Series</h3></a></li>
                    <li><a href="#"><h3>ZXL Series</h3></a></li>
                </ul>
            </li>
            </div>
        </ul>
    </li>
    
    <li class="rod-img"><span class="txl"><a href="#">Sage TXL</a></span></li>
    </div>
</ul>

<ul class="rod-tall">
<div class="rod-inner">
<ul>
    <li class="rod-class"><h2>Saltwater</h2></li>
    <li class="rod-list">
        <ul>
        <div class="desc-box">
            <li class="rod-desc"><span class="desc">Groundbreaking level of torque and torsion resistance for superior tracking.</span> 
                <ul class="model">
                    <li><a href="#"><h3>XI3 Series</h3></a></li>
    ...

CSS

#rod-contain{
    display: block;
    width: 1000px;
    margin: auto;
    margin-left: 50px;
}

.rod-tall{
float: left;
position: relative;
display: block;
width: 170px;
margin-right: 20px;
margin-bottom: 25px;
}

.rod-inner{

    margin: auto;
    width: 180px;
}

.rod-class{
    margin: auto;
    border-bottom: 1px dashed #333;
    width: 180px;
    text-align: center;
}

.rod-class h2{
    line-height: 25px;
    color: #1a3c5a;

}

.rod-img .xi3{
display: block;
    background-image: url('http://tailwatersflyfishing.com/media/sage-saltwater.png');
    background-repeat: no-repeat;
width: 70px;
    height: 800px;
    margin: auto;
    padding-right: 11px;
    
}

.rod-img .one{
display: block;
    background-image: url('http://tailwatersflyfishing.com/media/sage-all.png');
    background-repeat: no-repeat;
width: 54px;
    height: 800px;
    margin: auto;
    
    
}

.rod-img .bass{
display: block;
    background-image: url('http://tailwatersflyfishing.com/media/sage-specialty.png');
    background-repeat: no-repeat;
width: 53px;
    height: 800px;
    margin: auto;
    
    
}

.rod-img .txl{
display: block;
    background-image: url('http://tailwatersflyfishing.com/media/sage-freshwater.png');
    background-repeat: no-repeat;
width: 57px;
    height: 800px;
    margin: auto;
    
    
}

.rod-img .spey{
display: block;
    background-image: url('http://tailwatersflyfishing.com/media/sage-two-hand.png');
    background-repeat: no-repeat;
width: 57px;
    height: 800px;
    margin: auto;
    
    
}



.rod-img a{
    opacity: .0;
}

.desc-box{
    width: 160px;
    background-color: #88ac29;
    padding: 10px;
    border-bottom: 1px dashed #333;
    
}

.rod-desc .desc{
    margin: auto;
    text-align: center;
}



.rod-desc {
margin: auto;
width: 155px;
    color: #fff;
    font-size: .9em;
    text-align: center;
    margin-bottom: 10px;
    
}

.rod-desc h3 {
padding-bottom: 5px;
    text-align: center;
    margin: auto;
    color: #fff;
    font-size:...

JavaScript

$('.rod-list').hide();
$('.rod-tall').hover(function() {
    $('.rod-list',this).slideToggle('fast');
},function() {
    $('.rod-list',this).slideToggle('fast');
});