小程序開發中，純css實現內容收起折疊功能

不多說，直接上代碼：

wxml頁面：

<!--收起折疊 begin-->
<view style='width:100%;background:#fff;border-top:1px solid #d7d7d7;'>
  <view style='float:left;width:200px;height:90px;display:{{displaymore}}' bindtap='sourcelistshow'>全部課程</view>
  <view style='float:left;width:200px;height:90px;display:{{displayless}}' bindtap='sourcelistless'>點擊收起</view>
  
  <view style='height:200px;width:80%;background:#fff;float:left;border:1px solid #000;display:{{display}}'>隱藏的內容</view>
  <view style='float:left;height:200px;width:80%;background:#fff;border:1px solid #000'>123123123123</view>

</view>
<!--收起折疊 end-->

js頁面：

Page({
  data: {
    display:'none',
    displaymore:'block',
    displayless: 'none'

  },


  sourcelistshow: function(){
    console.log('more')
    var that = this
    that.setData({ display: 'block', displaymore:'none',displayless:'block' })  
  },
  sourcelistless: function () {
    console.log('less')
    var that = this
    that.setData({ display: 'none', displaymore: 'block', displayless: 'none' })
  }