使表格行像手风琴一样

Question

我正在使用表格来显示作业。表格行的初始高度值为300px。加载表时，表行高度减少到50px，以便隐藏一些细节，这可以通过添加样式来完成。

.hidedetails {
 max-height: 50px; 
}

要显示隐藏的详细信息，用户需要单击向下箭头。通过这样做，将删除.hidedetails样式并添加以下内容，同时向下箭头更改为向上箭头。

.showdetails {
 min-height: 300px; 
}

要再次隐藏详细信息，用户只需单击向上箭头，然后再次更改为向下箭头。结果如下：

我想知道如果单击未选中的表格行的向下箭头，如何隐藏显示它们的表格行的详细信息。我尝试过使用JQuery但它不起作用。

Answer 1

如果有人感兴趣，我可以通过将此添加到箭头图标按钮小部件的 onClick 事件来实现我想要的效果。

var tableRow = widget.parent.parent;
var rows = tableRow.parent.children._values;

if (widget.text === ("keyboard_arrow_down") ) { 
  for (var i = 0; i < rows.length; i++) {
    if (rows[i].name.indexOf('Table2Row') > -1) {
      rows[i].styles = ['hidedetails'];
      rows[i].descendants.Button3.text = "keyboard_arrow_down";
    }  
  }
  tableRow.styles = ['showdetails'];
  widget.text = "keyboard_arrow_right";
} else if (widget.text === ("keyboard_arrow_right")){
    tableRow.styles = ["hidedetails"];
    widget.text = "keyboard_arrow_down";
}