Simple jquery tab navigation

The code below creates very simple tabbed interface with plain HTML, CSS and jquery -

The jQuery

$('.tabsContent').hide();
$('.tabsContent:first').show();
$('.theTabs li:first').addClass('selectedTab');
$('.theTabs li a').click(function(){    
    $('.theTabs li').removeClass('selectedTab');   
    $(this).parent().addClass('selectedTab');    
   
    var currentTab = $(this).attr('href');    
    $('.tabsContent').hide();   
    $(currentTab).show();  
      
return false;

});

The HTML

<ul class="theTabs">                       
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>

<div id="tab-1" class="tabsContent">
    Tab 1
</div>
<div id="tab-2" class="tabsContent">
    Tab 2
</div>
<div id="tab-3" class="tabsContent">
    Tab 3
</div>


The CSS

.theTabs{
    font-weight: bold;
}
.theTabs li{
    float: left;
}
.theTabs li a{
    display: block;
    padding: 6px 0;
}
.tabsContent{
    display: none;
}
.selectedTab{
    background: red;
}

jquery substring text with dots

Here is the code snippet to Substring text using jquery -

$(".className").each(function(){
    if ($(this).text().length > 24) {           
        $(this).text($(this).text().substr(0, 24));
        $(this).append('...');           
    }
});

Input type text element width auto resize

A small jquery function helps us making the text field resize automatically with width auto -

function resizeInput() {
    $(this).attr('size', $(this).val().length+2);
}   

$('input[type="text"]').keyup(resizeInput).each(resizeInput);