js展开和折叠
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展开和折叠–效果
展开
折叠