Edit in JSFiddle

$(document).ready(function() {
    $('#con>li:gt(0)').hide();
    $('#nav li:first').addClass('active');
    $('#tabs #nav li').bind('click', function() {
        $('li.active').removeClass('active');
        $(this).addClass('active');
        var target = $('a', this).attr('href');
        $(target).slideDown(400).siblings().slideUp(300);
        return false;
    });
});

#nav{
    float: left;
    width: 100px;
}

#nav li{background: #ccc;}
#nav li:hover,
#con li ul li a:hover{background: #eee;}
#nav li.active{
    color:#f7f7f7;
     background:  #eee;
}
ul#nav li.active a{color: #303030;}
ul#nav li a{
    padding: 5px 5px;
    margin: 0 0 3px 0;
    display: block;
    width: 100px;
    text-decoration: none;
    color: #7e7e7e;
    font: 11px/20px Georgia;
}

ul#nav a:hover{color: #0a0a0a}

ul#con{
    margin: 15px 0 0;
    background: #fff;
    min-height: 180px;
    width: 350px;
    float: left;
    padding: 0 10px;
}

#con>li{
    width: 350px;
    list-style: none;
    padding: 0 10px 10px 0;
}
#con li ul li a{
    display: block;
    border-bottom: 1px solid #e7e7e7;
    padding: 5px 0;
    text-decoration: none;
}

<div id="tabs">
            <ul id="nav">
                <li><a href="#list-a">list-a</a></li>
                <li><a href="#list-b">list-b</a></li>
                <li><a href="#list-c">list-c</a></li>
            </ul>
            <ul id="con">
                <li id="list-a">
                    <ul>
                    <li><a href="#">take01</a></li>
                    <li><a href="#">take02</a></li>
                    <li><a href="#">take03</a></li>
                    <li><a href="#">take04</a></li>                 
                    </ul>
                </li>
                        
                <li id="list-b">
                    <ul>
                    <li><a href="#">take05</a></li>
                    <li><a href="#">take06</a></li>
                    <li><a href="#">take07</a></li>
                    <li><a href="#">take08</a></li> 
                    </ul>
                </li>
                        
                <li id="list-c">
                    
                    <form method="get" id="searchForm" action="#">
                        <p>
                            <input type="text" value="" name="s" id="s" />
                            <input type="submit" value="Search!" />
                        </p>
                    </form>
                    
                </li>
            </ul>
        </div>