<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击查看 收起</title>
<script src="js/jquery-1.7.1.min.js"></script>
</head>
<style>
.abc{ 150px;height: 150px;background: red;}
.fff{font-size: 18px;color: blue;}
.big-box{background: #888;}
.pink{
150px;
height: 100px;
background: pink;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
transform: rotate(80deg);
text-align: center;
line-height: 100px;
}
.fff{
background: #fff;
border: 1px solid #000;
}
.head{line-height: 30px;}
.arrow{ 20px;height: 20px;background: red;display: block;float: right;}
.show_hide_btn{line-height: .64rem;font-size: .28rem;color: #4c4c4c;text-align: center;}
.show_hide_btn i{display: inline-block; 50px;height:50px;vertical-align: top;margin-top: .18rem;margin-left: .1rem;
background: url(img/fold_t.png) no-repeat center #fe3837;background-size: 30px auto;border-radius: 50%; box-shadow: 0 5px 15px 0 rgba(0,0,0,.14);}
.show_hide_btn i.flod_t{background: url(img/fold_t.png) no-repeat center #fe3837; background-size: 30px auto;transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); }
</style>
<script>
$(document).ready(function() {
var le = $('div.coup_list').length;
if(le >1){
$('.show_hide_btn').css('display','block');
$('.coup_list:gt(0)').css('display','none');
}
$('.show_hide_btn').toggle(function(){
$('.coup_list:gt(0)').show();
$('.show_hide_btn i').addClass('flod_t');
$('.show_hide_btn span').html('收起')
}
,function(){
$('.coup_list:gt(0)').hide();
$('.show_hide_btn i').removeClass('flod_t');
$('.show_hide_btn span').html('点击查看');
})
});
</script>
<body>
<div class="coup">
<div class="coup_list">111</div>
<div class="coup_list">44445</div>
<div class="coup_list">5675</div>
<div class="coup_list">ertyr</div>
<div class="coup_list">ertyer</div>
<div class="coup_list">ertye</div>
<div class="coup_list">etryefsdfr</div>
<div class="show_hide_btn" style="display:none" ><span>点击查看全部券码 </span><i class=""></i></div>
</div>
</body>
</html>