jquery实现toggle效果

• html代码

<div class="grace-rows grace-common-mt " style="width: 90%;border-bottom:1px solid #E9E9E9">
           <div style="text-align: left;text-indent:1em; width: 70%;line-height: 40px;font-size: 20px;font-weight: 600;">  基本信息</div>

          <div style="width: 30%;line-height: 42px;" class=""><span type="button" class="mui-icon mui-icon-arrowup" style="font-size: 14px;" id="show_jiben_xinxi"> 收起</span>
         </div>
</div>

<div id="jiben_xinxi_container" style="width: 90%;" class="grace-columns grace-align-items">
<--do something...-->
</div>

• js代码

 //显示隐藏
        $('#show_jiben_xinxi').click(function () {
            if($(this).hasClass('mui-icon-arrowup')){
                $(this).text(' 显示');
                $(this).removeClass('mui-icon-arrowup');
                $(this).addClass('mui-icon-arrowdown');
                $('#jiben_xinxi_container').toggle();
            }else{
                $(this).text(' 收起');
                $(this).removeClass('mui-icon-arrowdown');
                $(this).addClass('mui-icon-arrowup');
                $('#jiben_xinxi_container').toggle();

            }
        });

效果