help me simplify this javascript using jquery

help me simplify this javascript using jquery

hi everyone,
my name is equatorlounge and im quite new into its coding even though i've used jquery for more than 10 years!!

i wanted to simplify this JavaScript function as follows; but before you read this, here is a brief of what it does: in fact, it's just a left menu and clicking on each menu shows its contents (initially style as display none); now what i wanted initially is a fade-in fade-out effect but guess i couldn't do it on codes;

here are the html5 codes:
<div class="col-lft left w-15 h-450 CustomerCreate">
   <div class="panel">
   <ul>
   <li id="liPersonalDetails" class="activetab"><a href="#" onclick="return ToggleDetails('PersonDetails','CustomerLegend','Personal Details','liPersonalDetails');">Personal Details</a></li>
   <li id="liCardDetails"><a href="#" onclick="return ToggleDetails('CardDetails','CustomerLegend','Card Details','liCardDetails');">Card Details</a></li>
   <li id="liBankDetails"><a href="#" onclick="return ToggleDetails('BankDetails','CustomerLegend','Bank Details','liBankDetails');">Bank Details</a></li>
   <li id="liRiskManagement"><a href="#" onclick="return ToggleDetails('RiskManagement','CustomerLegend','Risk Management','liRiskManagement');">Risk Management</a></li>
   <li id="liOtherDetails"><a href="#" onclick="return ToggleDetails('OtherDetails','CustomerLegend','Other Details','liOtherDetails');">Other Details</a></li>
   </ul>
   </div>
</div>
<div class="hidePanel left"></div>
<div class="showPanel left hid"></div>

and here are the JavaScript codes:
jQuery(document).ready(function ()
{
    $(".hidePanel").click(function ()
    {
        $(".col-lft").animate({ marginLeft: "-300px", width: "0px", opacity: 0 }, 400);
        $(".col-rgt").animate({ width: "98%" }, 400);
        $(".showPanel").show("normal").animate({ opacity: 1, width: "10px" }, 200);
        $(".hidePanel").show("normal").animate({ opacity: 0, width: "0px" }, 200);

    });

    $(".showPanel").click(function ()
    {
        $(".col-lft").animate({ marginLeft: "0px", width: "15%", opacity: 1 }, 400);
        $(".col-rgt").animate({ width: "83%" }, 400);
        $(".hidePanel").show("normal").animate({ opacity: 1, width: "10px" }, 200);
        $(".showPanel").show("normal").animate({ opacity: 0, width: "0px" }, 200);
    });


});

/* Customer Related Tabs */
function ToggleDetails(div,id,name,li) {

    ShowDetails(div, id, name,li);

    if (div != "PersonDetails")
        HideDetails("PersonDetails","liPersonalDetails");

    if (div != "CardDetails")
        HideDetails("CardDetails","liCardDetails");

    if (div != "BankDetails")
        HideDetails("BankDetails","liBankDetails");

    if (div != "OtherDetails")
        HideDetails("OtherDetails", "liOtherDetails");

    if (div != "RiskManagement")
        HideDetails("RiskManagement", "liRiskManagement");
}

function ShowDetails(div,id,name,li) {
    document.getElementById(div).style.display = 'block';
    document.getElementById(id).innerHTML = name;
    document.getElementById(li).className = 'activetab';
}

function HideDetails(div,li) {
    document.getElementById(div).style.display = 'none';
    document.getElementById(li).className = '';
}