HTML

首先我们放置一个显示的展开按钮和一个隐藏的收起按钮：

<div id="online_qq_tab">
    <a id="floatShow" style="display:block;" href="javascript:void(0);">收缩</a> 
    <a id="floatHide" style="display:none;" href="javascript:void(0);">展开</a>
</div>

接着我们放多个在线QQ客服、网页咨询、电话显示及新版调查。

<div id="onlineService">
    <div class="onlineMenu">
        <h3 class="tQQ">QQ在线客服</h3>
        <ul>
            <li class="tli zixun">在线咨询</li>
            <li><a href="https://jy.tp.yuanmeng.life/"><img src="images/pa.gif" width="74" height="22" alt="客服001" /></a></li>
            <li><a href="https://jy.tp.yuanmeng.life/"><img src="images/pa.gif" width="74" height="22" alt="客服001" /></a></li>
            <li class="tli fufei">付费学员</li>
            <li class="last"><a href="https://jy.tp.yuanmeng.life/"><img src="images/pa.gif" width="74" height="22" alt="客服001" /></a></li>
        </ul>
    </div>
    <div class="wyzx">
        <a href="https://jy.tp.yuanmeng.life/"><img src="images/right_float_web.png" width="122" height="50" alt="网页咨询" /></a>
    </div>
    <div class="onlineMenu">
        <h3 class="tele">QQ在线客服</h3>
        <ul>
            <li class="tli phone">4008-517-517</li>
            <li class="last"><a class="newpage" href="https://jy.tp.yuanmeng.life/">新版调查</a></li>
        </ul>
    </div>
    <div class="btmbg"></div>
</div>

jQuery

$("#floatShow").click(function() { //展开按钮点击
    $("#onlineService").animate({
        width: "130px",
        opacity: "show"
    },
    "normal",
    function() {
        $("#onlineService").show(); //显示客服区域
    });
    $("#floatShow").hide(); //隐藏展开按钮
    $("#floatHide").show(); //显示收缩按钮
}) $("#floatHide").click(function() { //收缩按钮点击
    $("#onlineService").animate({
        width: "0",
        opacity: "hide"
    },
    "normal",
    function() {
        $("#onlineService").hide(); //隐藏客服区域
    });
    $("#floatShow").show(); //显示展开按钮
    $("#floatHide").hide(); //隐藏收缩按钮
})