Question

Why is it so hard to use the jquery tab UI :S..

i have download it without the theme cause i want to make my own because i dont want million of CSS just to make that tab effect :S.

so i need to work with the CSS now so i can hide the content and when i click on a link i should shold the content..

this is what i have now:

<script>
var $tabs = $('#tabs-1').tabs(); // first tab selected

$('#tabs-1').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});
</script>
                <div id="tabs">
                           <ul>
                              <li><a href="#tabs-1">Tab 1</a></li>
                              <li><a href="#tabs-2">Tab 2</a></li>
                              <li><a href="#tabs-3">Tab 3</a></li>
                           </ul>
                           <div id="tabs-1">
                              <p>Tab 1 content</p>
                           </div>
                           <div id="tabs-2">
                              <p>Tab 2 content</p>
                           </div>
                           <div id="tabs-3">
                              <p>Tab 3 content</p>
                           </div>
                        </div><!-- tabs -->

#tabs ul{
    width: 296px;
    float: left;
}

#tabs li {
    float: left;
    width: 95px;
    text-align: center;
}

#tabs-1 {

}

#tabs-2 {
    display: none;
}

#tabs-3 {
    display: none;
}

hope some one can help me out im confused

Answer 1

First

var $tabs = $('#tabs-1').tabs();

must be

var $tabs = $('#tabs').tabs();

second, you must override or define the css rules if you dont download them

.ui-tabs-hide {
 display:none;   
}

this you need to have!

And this you dont need at al:

$('#tabs-1').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});