How to create a collapse effect for table cells (guide)

I wanted to share a technique i use to show/hide a large body of text in a repeated table cell.

Initially the cell shows only the first 300 characters then On Click it expands and shows all. Then closes when you click again.

Create a Variable call it whatever you want, in my case msgid.

Then Add Dynamic Attribute to the cell Innerhtml/text to this:

msgid.value == message_id ? message_body : (message_body.trunc(300, true, '...'))

Add Dynamic Event to Cell:

msgid.value != message_id ? message_id : 0

Optionally i have a css class on the cell that sets cursor to Pointer.

.rollover {  
 cursor: pointer;  
}

Capture1874×1287 77.2 KB

/J