右侧弹窗tab切换以及向左展开，向右收起的实现方法

我要实现的效果是将一个弹窗像左展开向右收起，实现方法如下：
DOM层代码：

 <div class="unfold-away-wrap">
        <div class="unfold-away-btn"></div>
        <ul class="tab-wrap">
            <li class="tab-active">
                <span>内容一</span>
            </li>
            <li>
                <span>内容二</span>
            </li>
        </ul>
        <div class="tab-con">
            <div class="con">内容一</div>
            <div class="con" style="display:none">内容二</div>
        </div>
    </div>

在dom层布局的时候一定注意，只需给最外层的div给一个绝对定位，然后三个按钮相对于最外层的父级盒子进行绝对定位，tab-con里面的内容能不用定位就不要用定位。
css代码：

.unfold-away-wrap{
    width: 200px;
    height: 350px;
    position:absolute;
    top: 50px;
    right: 10px;
    background:#1890ff;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    .unfold-away-btn{
        width: 14px;
        height: 50px;
        background:url("../img/unflod-icon.png") no-repeat;
        border-radius: 4px;
        position: absolute;
        top: 160px;
        left: -13px;
        cursor: pointer;
    }
    .unfoldBtn{
    width: 14px;
    height: 50px;
    background:url("../img/unfold-icon.png") no-repeat;
    background-size: 100% 100%;
    position:absolute;
    top:160px;
    left:-13px;
    cursor: pointer;
  }
 .tab-wrap{
     font-size: 0;
     position: absolute;
     top: 10px;
     left: -18px;
     cursor: pointer;
     li{
      width: 19px;
      background:url("../img/tab-label-bg.png") no-repeat;
      background-size:100% 100%;
      text-align:center;
      padding: 10px 0;
      span{
        font-size: 12px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #333333;
        line-height: 18px;
      }
    }
     .tab-active{
      width: 19px;
      background:url("../img/tab-active-bg.png") no-repeat;
      background-size:100% 100%;
      text-align:center;
      padding: 10px 0;
      span{
        font-size: 12px;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 18px;
        text-shadow: 0px 1px 3px rgba(5, 87, 127, 0.5);
      }
    }
 }
 }

js操作dom层实现tab切换和弹窗的展开收起

 $(function () {
 // 切换弹窗内容
 $('.tab-wrap li').click(function () {
  var index = $(this).index()
  $(this).addClass('tab-active').siblings().removeClass('tab-active')        $(this).parent().next().children().eq(index).show().siblings().hide()
  });
   // 右侧弹窗展开收起
    const zh = false // 先将其定义为false,经过取反之后成为true，也就是默认为展开状态
    $('.unfold-away-btn').click(function () {
     this.zh = !this.zh
     if (this.zh === true) {
     $('.unfold-away-wrap').animate({ right: '10px' }, 350)
      $(this).removeClass('unfoldBtn')
      } else {
      $('.unfold-away-wrap').animate({ right: '-200px' }, 350)
      $(this).addClass('unfoldBtn')
            }
        });
    })

实现效果如下：