tab标签页与动态切换，点击图标显示整个页面，出现收回图标一行字体显示图标

.help-box {
    font-size: 1.2rem;
}

.help-box .main dt {
    font-size: 1.6rem;
    font-weight: bold;
}

.help-box .main dd {
    line-height: 2rem;
}

.help-box .main ul {
    padding-left: 2em;
    margin-bottom: 8px;
}

.help-box .main ul li {
    margin-bottom: 5px;
}

.help-box .main p {
    text-indent: 2rem;
}

.help-box .main li i {
    margin-right: 6px;
}
.help-box .list-group{width:100%;}
.help-box .list-group li.active .list-group-item {

}

.help-box .list-group li {
    margin-bottom: 0;
}
.helpcentertop{
    background-color: #f4f4e9;
    margin-bottom: 30px;
    width:100%;
}
.helpcentertop img{
    display: block;
    width:100%;
    height:auto;
    margin:0 auto;


}
.helpcentercont{
    padding:0 11.5%;
   overflow: hidden;
    margin-bottom: 120px;

}
.helpcentercont .aside{
    float: left;
    height:100%;
    padding-bottom: 139px;
    background-color: #f6f6f6;


}

.helpcentercont .aside li{
    padding:11px  33px 13px 22px;
    font-size:14px;
    line-height:14px;
    color: #2f2e2e;
    background-color: #f6f6f6;

}
.helpcentercont .aside li:hover{

}

.helpcentercont .aside li.active{

    background-color: #fff;
}
.helpcentercont .aside li：hover a, .helpcentercont .aside li.active a{
    color: #48b84a;
}
.helpcentercont .aside li.guide{
    padding:16px  27px 12px 19px;
    font-size:16px;
}

.helpcont{
    float: left;
    width: 86%;
    margin-left: 12px;
    background-color: #f6f6f6;
    padding:0px 27px;
}
.helpcont h3:hover{
    color: #48b84a;
    cursor: pointer;
}
.helpcont h3{
    float: left;
    font-size:16px;
    color: #787674;
    font-weight:bold;
    margin: 25px 0px 17px 0px;


}
.toggleColor{
    color: #48b84a !important;
    cursor: pointer;
}
.helpcont p{
    position: relative;
    clear: both;
    font-size:14px;
    line-height:20px;
    color: #575a5d;
    font-weight:normal;
    margin:0px;
    padding: 0px 20px 20px 0px;
    border-bottom: 1px solid #d2d2d2;


}
.helpcont p i{
    position: absolute;
    font-size:20px;
    right:0px;
    cursor: pointer;

}
.helpcont p i:hover{
    color: #48b84a;
}
.helpcont p.last{
    border-bottom: none;
}
.addDefault{
    height: 35px;
    line-height: 28px !important;
    overflow: hidden;

}









//ftl

<#import "/resource/common_html_front.ftl" as html>
<#import "/indexMenu.ftl" as menu>
<#import "/account/accountMenu.ftl" as accountMenu>
<@html.htmlBase>
    <@menu.menu selectMenu=""/>
<!------灰色区域------>
<div class="helpcentertop">
    <img src="../resource/images/helpcenter/helpcenter.png" >
</div>
<div class="helpcentercont clearfix">
    <ul class="aside">
        <li class="guide">
          服务指南
        </li>
        <li class="active">
            <a href="#customize" data-toggle="tab" role="tab" aria-controls="customize">定制问题</a>
        </li>
        <li>
            <a href="#uploadques" data-toggle="tab" role="tab" aria-controls="uploadques">上传问题</a>
        </li>
        <li>
            <a href="#memberques" data-toggle="tab" role="tab" aria-controls="memberques">会员问题</a>
        </li>
</ul>
    <div class="tab-content helpcont">
        <div class="tab-pane fade in active" id="customize">
            <h3>用户该如何定制？</h3>
            <p data-height="40"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>定制页面选择设计师→沟通确认详细需求、交稿时间及价格等信息→点击付款链接付款→设计师完成作品后下载→若不满意，可以推迟订单一次，设计师重新设计上传最新作品。</p>
            <h3>设计作品达不到理想效果怎么办？</h3>
            <p data-height="60"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>在约定需求不变的前提下，首先，请您特别重视与设计师沟通，只要在订单过程中，您都可以直接联系设计师，针对进展、目标等进行沟通。在第一次下载设计师的定制作品后，若不满意，可以推迟订单一次，设计师重新设计上传最新作品。若还未满意，申请仲裁，客服将介入调解。若设计师为责任方，则平台将款项退还客户，但需据情况扣除一定的服务费；若客户为责任方，则不予退款。</p>
            <h3>设计师如何接单，完成定制任务？</h3>
            <p data-height="200"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>①用户定制页面选择设计师。<br/>
                ②双方沟通确认详细需求、交稿时间及价格等信息。<br/>
                ③设计师选择个人中心→上传作品→上传定制服务，将定制类型、定制价格、完成期限等填写完毕，确认提交。<br/>
                ④确认提交后点击“发送订单”按钮，将自动复制付款链接到剪切板，设计师然后发送付款链接给用户。<br/>
                ⑤用户付款后，设计师即可开始作品设计。<br/>
                ⑥作品完成后，设计师需在约定的完成期限前，在“我的定制”中完成作品上传。<br/>
                ⑦若用户第一次不满意，选择了“推迟”，设计师将要根据用户需求进行作品修改，然后再次进行作品上传。<br/>
                ⑧用户确认订单，订单完成。<br/>
                ⑨若定制过程中产生纠纷，设计师也可申请仲裁，客服将介入调解。若设计师为责任方，则平台将款项退还客户，但需据情况扣除一定的服务费；若客户为责任方，则不予退款。</p>
            <h3>设计师如何提现？</h3>
            <p class="last" data-height="20"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>设计师完成定制订单后，可以进入个人中心→我的收入查看。设计师的总收入累计超过200元后方可提现。</p>
        </div>
        <div class="tab-pane" id="uploadques">
            <h3>我不是设计师也可以上传吗？</h3>
            <p data-height="20"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>柚墨模板网站的所有注册用户都可以进行作品上传，入口：个人中心→上传作品。</p>

            <h3>我可以上传什么作品？</h3>
            <p data-height="40"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>Office模板（PPT模板、Excel模板和Word模板）、AE模板和表情包。<br/>为了提高您的模板通过率，在进行模板上传时，请仔细阅读相关模板上传规范。</p>

            <h3>我为什么要在柚墨上传作品？</h3>
            <p data-height="40"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>柚墨网站提供给用户的不仅是一个资源下载平台，还是一个可供用户上传模板获取收益的交易平台，且目前柚墨网站不收取任何手续费，最大程度保证的用户的权益。</p>

            <h3>上传模板出售获得的收入如何提现？</h3>
            <p class="last" data-height="20"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>您可以进入个人中心→我的收入查看。当出售模板的总收入累计超过200元后方可提现。</p>


        </div>
        <div class="tab-pane" id="memberques">

            <h3>什么是柚墨会员?</h3>
            <p data-height="20"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>柚墨会员是柚墨网站推出的一款模板包月服务，您只需支付每月16.8元，即可享受全场模板免费下载。</p>


            <h3>会员有什么特权?</h3>
            <p data-height="20"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>柚墨会员可享有：全场模板免费下载（除新品模板外）、新品模板专享5折特权、尊贵会员身份头衔、专属客服等。 </p>


            <h3>柚墨会员怎样购买？</h3>
            <p class="last" data-height="60"><i class="iconfont shows">&#xe618;</i> <i class="iconfont shou">&#xe617;</i>会员可以通过微信和支付宝方式购买开通。<br/>
                用户进入柚墨网站会员专区，点击柚会员→立即充值，会弹出相应的会员购买页面<br/>
                一旦开通柚墨会员服务，不提供退款，请谅解！</p>

        </div>
    </div>
</div>

<link rel="stylesheet" href="${basepath}/resource/css2/help.css" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function () {
        $(".helpcont h3").click(function() {
                    $(this).toggleClass("toggleColor");}
        );
        $(".helpcont p").each(function(i,ele){
               if($(ele).data("height")===20){
                  $(ele).find("i").hide();
               }else{
                   console.log("aaa");
                   $(ele).find("i.shou").hide();
                   $(ele).find("i.shows").show();
                    $(ele).addClass("addDefault");

               }
                                                 }
        );
        $(".helpcont").on("click","h3",function(){
            if( $(this).next("p").data("height")===20){
                $(this).next("p").find("i").hide();
            }else{
                $(this).next("p").toggleClass("addDefault");
                $(this).next("p").find("i.shows").fadeToggle();
                $(this).next("p").find("i.shou").fadeToggle();
            }

                }

        );

        $(".helpcont").on("click","i",function(){
                    if( $(this).closest("p").data("height")===20){
                        $(this).closest("p").find("i").hide();
                    }else{
                        $(this).closest("p").toggleClass("addDefault");
                        $(this).closest("p").find("i.shows").fadeToggle();
                        $(this).closest("p").find("i.shou").fadeToggle();
                    }

                }

        );

    /*    var ele=[$("#customize p"),$("#uploadques p"),$("#memberques p")];

        var i=0;
            (function() {
                ele[i].click(
                        function () {
                            console.log(this);
                            console.log($(this).height());
                            if ($(this).height() === 20) {
                                $(this).find("i").hide();
                            }
                        }
                );
            })(i);
           if($("a[href=‘#uploadques‘]").closest("li").hasClass("active")){
               console.log("aaa");
                i=1;
                $(ele[1]).trigger(‘click‘);
            }
            if($("a[href=‘#memberques‘]").closest("li").hasClass("active")){
                i=2;
                $(ele[2]).trigger(‘click‘);
            }
            if($("a[href=‘#customize‘]").closest("li").hasClass("active")){
                 i=0;
                $(ele[0]).trigger(‘click‘);
            }




*/

    });

</script>
</@html.htmlBase>