Make table row behave like an accordion

Question

I'm using a table to display assignments. The table row has an initial height value of 300px. When the table is loaded, the table row height is reduced to 50px so that some of the details are hidden and this is done by adding a style.

.hidedetails {
 max-height: 50px; 
}

To show the hidden details, the user needs to click on the down-arrow. By doing that, the .hidedetails style is removed and the following is added, at the same time the down-arrow changes to an up-arrow.

.showdetails {
 min-height: 300px; 
}

To hide the details again, the user simply clicks on the up-arrow, which then changes again to the down-arrow. The result is the following:

I would like to know how can I hide the details of the table row that is showing them if I click on the down-arrow of the table row that is not selected. I have tried with JQuery but it won't work.

Answer 1

In case anyone is interested, I was able to achieve what I wanted by adding this to the onClick event of the arrow icon which is a button widget.

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";
}