js页脚点击展开折叠弹窗效果

html代码

<footer>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThird" aria-expanded="false" class="collapsed clearfix">
<span class="pull-right"><button class="btn btn-default down" type="submit"><i class="iconfont "></i></button><button class="btn btn-default up" type="submit"><i
class="iconfont"></i></button></span>
</a>
</div>
<div id="collapseThird" class="panel-collapse collapse">
<div class="panel-body">
<div class="friendLinks">
<div class="container">
<div class="row">
<div class="col-xs-2">
<div class="linksTitle">友情链接</div>
<hr size="4" color="#f5874a">
</div>
<div class="col-xs-8">
<div class="list1 col-xs-4">
<ul>
<li><a href="#">CSDNCSDNCSDNCSDNCSDN</a></li>
<li><a href="#">宁皓网宁皓网宁皓网宁皓网</a></li>
<li><a href="#">慕课网慕课网</a></li>
</ul>
</div>

<div class="list2 col-xs-4">
<ul>
<li><a href="#">CSDNCSDNCSDNCSDNCSDN</a></li>
<li><a href="#">宁皓网宁皓网宁皓网宁皓网</a></li>
<li><a href="#">慕课网慕课网</a></li>
</ul>
</div>

<div class="list3 col-xs-4">
<ul>
<li><a href="#">CSDNCSDNCSDNCSDNCSDN</a></li>
<li><a href="#">宁皓网宁皓网宁皓网宁皓网</a></li>
<li><a href="#">慕课网慕课网</a></li>
</ul>
</div>

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

</div>

</div>
</div>
</div>
<span>©2017 CSDN All Rights Reserved. </span>
</div>
</footer>

css代码

footer {
background: #fafafa;
padding-bottom:25px;
display: block;
font-size: 12px;
color: #444;
font-family:"微软雅黑";
text-align: center;
}

footer .down{
position: relative;
right: 83px;
top:34px;
display: none;
}

footer .up{
position: relative;
right: 83px;
top:34px;
}

footer .btn.active.focus, footer .btn.active:focus,footer .btn.focus,footer .btn:active.focus,footer .btn:active:focus,footer .btn:focus {
outline: none ;
outline-offset: -2px;
}

footer .btn-default.active.focus,footer .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
color: #333;
background-color: #fff;
border-color: #ccc;
}

footer .panel-default {
border: none;
background: #fafafa;
}

footer .panel-default > .panel-heading {
background-color: #fafafa;
border-bottom: #c1002a 1px solid;
}

footer .panel-default > .panel-heading + .panel-collapse > .panel-body {
border-bottom: #c1002a 1px solid;
}

footer .panel-body {
padding: 10px;
}

/*友情链接样式*/
.friendLinks {
width: 100%;
margin: 0 auto;
background: #fafafa;;
}

.linksTitle {
margin: 0;
height: 50px;
line-height: 50px;
font-size: 14px;
font-weight: bold;
color: #c1002a;
}

hr {
margin-left: 54px;
margin-top: -11px;
width: 120px;
height: 4px;
background: -webkit-linear-gradient(left, #c1002a, #fff);
background: -o-linear-gradient(right, #c1002a, #fff);
background: -moz-linear-gradient(right, #c1002a, #fff);
background: linear-gradient(to right, #c1002a, #fff);

}

.friendLinks ul li {
list-style: none;
line-height: 30px;
}

.friendLinks a {
color: #333;
}

.friendLinks  a:focus, .friendLinks a:hover {
color: #c1002a;
}

.friendLinks .list1, .list2, .list3 {
margin-top: 10px;
text-align: left;
}

js代码

$(function () {
$(".panel-heading>a").click(function () {
if ($(this).find(".up").css("display") == "none"){
$(this).find(".down").css("display", "none");
$(this).find(".up").css("display", "inline-block");
}else {
$(this).find(".down").css("display","inline-block");
$(this).find(".up").css("display","none");
}
})
});