How to convert my vertical tabs to horizontal using jquery?
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/773074/vertical-tabs-with-jquery">Vertical Tabs with JQuery?</a>  </p>
</blockquote>



<p>I am trying to convert my vertical tabs to horizontal placing it below my content slider.  Any help?  As of now the tabs are stacked on the side but I want them horizontal along the bottom of the slider.  Looking for help. Thank you. 
CSS:</p>

<pre><code>#featured{ 
width:680px; 
padding-right:0px; 
position:relative; 
border:2px solid #FF6600; 
height:430px; 
background:#fff;


#featured ul.ui-tabs-nav{ 
position:absolute;
bottom:0; left:0px;
list-style:none; 
padding:0; margin:0; 
width:170px;


#featured ul.ui-tabs-nav li{ 
padding:1px 0; padding-left:0px; 
border:1px solid #FF6600;   
font-size:20px; 
color:#666; 


#featured ul.ui-tabs-nav li img{ 
background:#fff; 
padding:2px; 
border:1px solid #eee;
position:relative;
float: left

#featured ul.ui-tabs-nav li span{ 
font-size:11px; font-family:Verdana; 
line-height:18px; 

#featured li.ui-tabs-nav-item a{
display:block;
height:20px; 
color:#333;  background:#f2f2f2; text-decoration:none;
line-height:20px;
text-align: center;


#featured li.ui-tabs-nav-item a:hover{ 
background:#f2f2f2; 

#featured li.ui-tabs-selected{ 
background:url('images/selected-item.gif') top left no-repeat;  

#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
background:#ccc;


#featured .ui-tabs-panel{ 
width:680px; height:430px; 
position:nested;

#featured .ui-tabs-panel .info{ 
position:absolute; 
bottom:22px; left:0; 
height:100px; 
background: url('images/transparent-bg.png'); 

#featured .info h2{ 
font-size:24px; font-family:Verdana,sans-serif; 
color:#fff; padding:5px; margin:0;
overflow:hidden; 

#featured .info p{ 
margin:0 5px; 
font-family:Verdana; font-size:11px; 
line-height:15px; color:#f0f0f0; 


#featured .info a{ 
text-decoration:none; 
color:#fff; 

#featured .info a:hover{ 
text-decoration:underline; 

#featured .ui-tabs-hide{ 
display:none; 
</code></pre>

<p>HTML:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"&gt;
&lt;head profile="http://gmpg.org/xfn/11"&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Slider&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" &gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" &gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function(){
$("#featured &gt; ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div id="featured" &gt;
      &lt;ul class="ui-tabs-nav"&gt;
        &lt;li class="ui-tabs-nav-item" id="nav-fragment-1"&gt;&lt;a href="#fragment-1"&gt;&lt;span&gt;asdfasdfasfds&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="ui-tabs-nav-item" id="nav-fragment-2"&gt;&lt;a href="#fragment-2"&gt;&lt;span&gt;asdfasfdasfd&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="ui-tabs-nav-item" id="nav-fragment-3"&gt;&lt;a href="#fragment-3"&gt;&lt;span&gt;asdfsadfasdfasf&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="ui-tabs-nav-item" id="nav-fragment-4"&gt;&lt;a href="#fragment-4"&gt;&lt;span&gt;sadfasdfdasdfsd&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;

    &lt;!-- First Content --&gt;
    &lt;div id="fragment-1" class="ui-tabs-panel" style=""&gt;
        &lt;img src="images/image1.jpg" alt="" /&gt;
         &lt;div class="info" &gt;
            &lt;h2&gt;&lt;a href="#" &gt;asdfasfasfdasfdsafa&lt;/a&gt;&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....&lt;a href="#" &gt;read more&lt;/a&gt;&lt;/p&gt;
         &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Second Content --&gt;
    &lt;div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""&gt;
        &lt;img src="images/image2.jpg" alt="" /&gt;
         &lt;div class="info" &gt;
            &lt;h2&gt;&lt;a href="#" &gt;asdfasdfsadfsafdasfdafdasf&lt;/a&gt;&lt;/h2&gt;
            &lt;p&gt;Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....&lt;a href="#" &gt;read more&lt;/a&gt;&lt;/p&gt;
         &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Third Content --&gt;
    &lt;div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""&gt;
        &lt;img src="images/image3.jpg" alt="" /&gt;
         &lt;div class="info" &gt;
            &lt;h2&gt;&lt;a href="#" &gt;asdfasfdafsdf&lt;/a&gt;&lt;/h2&gt;
            &lt;p&gt;liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facisdfsdfsdfssdfsdfsdsffssssslisis sollicitudin ornare....&lt;a href="#" &gt;read more&lt;/a&gt;&lt;/p&gt;
         &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Fourth Content --&gt;
    &lt;div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""&gt;
        &lt;img src="images/image4.jpg" alt="" /&gt;
         &lt;div class="info" &gt;
            &lt;h2&gt;&lt;a href="#" &gt;asfdasdfasdfasdfasf&lt;/a&gt;&lt;/h2&gt;
            &lt;p&gt;Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....&lt;a href="#" &gt;read more&lt;/a&gt;&lt;/p&gt;
         &lt;/div&gt;
    &lt;/div&gt;

    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>
</p>
