js展开和折叠(html代码)

js展开和折叠–代码

 .content{
     width:60%;
     margin:auto;
  }
 .caretnew{
     display: inline-block;
     width: 0;
     height: 0;
     margin-left: 2px;
     vertical-align: middle;
     border-top: 4px dashed;
     border-top: 4px solid\9;
     border-right: 4px solid transparent;
     border-left: 4px solid transparent;
    }
 .btn{
     display: inline-block;
     padding: 6px 12px;
     margin-bottom: 0;
     font-size: 14px;
     font-weight: 400;
     line-height: 1.42857143;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     -ms-touch-action: manipulation;
     touch-action: manipulation;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     background-image: none;
     border: 1px solid transparent;
     border-radius: 4px;
  }
 .btn-full{
    width:80%;
  }
 .btn-fullmall{
    width:20%;
    position:absolute;
    right:0px;
  }
 #ctl-info{
     background-color:#eee;
  }
 .box {
     width: 0;
     color: red;
     border: 8px solid transparent;
     border-top: 8px solid red;
     box-shadow: 0 -12px 0 -4px;
  }
</style>
<script>
    var flag = false;
    $(function () {
        $("#xiala").click(function () {
            if (!flag) {
                flag = true;
                $("#ctl-info").slideUp(100);
            }
            else {
                flag = false;
                $("#ctl-info").slideDown(100);
            } 
        });
        $("#xiazai").click(function () {
            alert("down...");
        })
    })
</script>

<div class="content">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                Panel title
            </h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
        <div class="panel-footer">
            Panel footer
        </div>
    </div>
    <div style="position:relative;">
        <button type="button" class="btn btn-full" id="xiala">
            主题
            <span class="caretnew"></span>
        </button>
        <button type="button" id="xiazai" class="btn btn-fullmall"> 下载PDF</button>
    
    </div>
    <div id="ctl-info">
        <iframe src="pdfjs-2.1.266-dist/web/viewer.html" width="100%" height="500"></iframe>
    </div>
</div>

js展开和折叠–效果

展开

折叠