design sketch:

Show and hide.gif

Implementation ideas:

• To show and hide a single list, you should use unique elements to let the program know which list items you should show and hide, and you can use the data id;
• In css, a hidden{display: none} is defined to control the display and hiding, and then it is judged by ternary operator;
• wxml defines a click event to dynamically modify the variable value of this list item.

Function realization:

OK, when you have the idea, start to use code validation according to the idea. Sure enough, after using the code implementation, I found that my thinking is still right. This function node can also be applied to display and hide other similar lists.

Example code:

<!--pages/myOrder/myOrder.wxml-->
<view class='container'>
  <!-- Order list -->
  <block wx:for-items="{{carInfoData}}">
    <view class='card  b-shadow' bindtap='toggleBtn' id="{{item.id}}">
      <view class='nearCard-fl'>
        <image src='{{item.imgurl}}'></image>
      </view>
      <view class='nearCard-fr'>
        <view>Date:
          <text class='c-green'>{{item.useDate}}</text>
        </view>
        <view>Model:
          <text class='c-green'>{{item.cx}}</text>
        </view>
        <view>Duration:
          <text class='c-green'>{{item.time}}</text>
        </view>
        <view>cost:
          <text class='c-green'>{{item.feiyong}}</text>
        </view>
      </view>
      <view class='down clearfix {{uhide==item.id?"":"hidden"}}'>
        <view class='ml30'>Start time: 2018.01.01 11:33</view>
        <view class='ml30'>End time: 2018.01.01 11:33</view>
        <view class='ml30'>Rental area: LongQin, bay, Taohua Island Scenic Area, Zhoushan City</view>
        <view class='feedBack'>Feedback</view>
      </view>
    </view>
  </block>
</view>

// pages/myOrder/myOrder.js
Page({

  /**
   * Initial data of the page
   */
  data: {
    uhide: 0
  },

  /**
   * Life cycle function -- listening to page loading
   */
  onLoad: function (options) {
    var that = this;

    var data = {
      "datas": [
        {
          "id": 1,
          "imgurl": "../../images/car.png",
          "useDate": "2017-12-22",
          "cx": "Chery EQ1",
          "time": "1 hour",
          "feiyong": "20 element"
        },
        {
          "id": 2,
          "imgurl": "../../images/car.png",
          "useDate": "2017-12-22",
          "cx": "Chery EQ1",
          "time": "1 hour",
          "feiyong": "20 element"
        },
        {
          "id": 3,
          "imgurl": "../../images/car.png",
          "useDate": "2017-12-22",
          "cx": "Chery EQ1",
          "time": "1 hour",
          "feiyong": "20 element"
        },
        {
          "id": 4,
          "imgurl": "../../images/car.png",
          "useDate": "2017-12-22",
          "cx": "Chery EQ1",
          "time": "1 hour",
          "feiyong": "20 element"
        }
      ]
    };
    //console.log(data.datas);
    //Set up vehicle display information
    that.setData({
      carInfoData: data.datas
    })
  },

  //Click to toggle hide and show
  toggleBtn: function (event) { 
    var that = this;
    var toggleBtnVal = that.data.uhide;
    var itemId = event.currentTarget.id; 
    if (toggleBtnVal == itemId) {
      that.setData({
        uhide: 0
      })
    } else {
      that.setData({
        uhide: itemId
      })
    } 
  }
})

GitHub source address: Applet show and hide