Result

jQuery

$(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;
    });
});

css

#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;
}

html

<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">content</li>  
                <li id="list-b">content</li> 
                <li id="list-c">content</li>
            </ul>
</div> 

via

Tabbed Content using jQuery

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7