2

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:

enter image description here

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Morfinismo
  • 4,985
  • 4
  • 19
  • 36
  • Did you try built in accordion widget? - https://developers.google.com/appmaker/scripting/api/widgets#Accordion. You can try to replace list in your table with it. – Pavel Shkleinik May 09 '17 at 13:53
  • @PavelShkleinik I did try. The problem with the built in accordion widget is that if I click on the row, it will expand/shrink and won´t let me edit values of other widgets inside the row where the hidden details are contained. I tried to build this on top of the partner management template but it gave me that problem. – Morfinismo May 09 '17 at 14:12

1 Answers1

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";
}
Morfinismo
  • 4,985
  • 4
  • 19
  • 36
  • How did you add content to the expanded row? I mean... i want to show some information only when the row is expanded... how can i do it? – jbra95 Jul 09 '18 at 14:29
  • 1
    @JuanBravoRoig You can do that by inserting a horizontal or vertical panel into the row, adding more height to the row too obviously so you can visualize everything you want to insert, then via scripting you can hide the panel inserted and shrink the row height and vice versa. – Morfinismo Jul 09 '18 at 16:14