Example code for doing "Read More/Less" expand and contract?


What would be the correct technique for implementing “Read More” and “Less” links that expand and contract content inline?


The pattern is roughly the same as the flip example in .

Basically have a property, perhaps called something like expanded, that is initially set to false, and an event handler on the read more/read less link. The event handler inverts the property, which would then invalidate the render function. Inside the render function would be the block of content to display for showing more, and also a condition to change the label for the read more/read less link.