UI Collapsible items in Elm: a css-only solution vs storing more data in the model

For example when implementing these collapsible items:

First approach that comes to my mind is to store a variable in the model expandedItems: List ItemId

to verify if an item is expanded you check if its id is in the list
to expand an item you add its id to the list
to collapse an item you remove its id from the list

There also are css-only solutions like this one https://jsfiddle.net/5hcwzf7s/2/

What would the advantages / disadvantages of css-only over the id list be?

Solution

I think you want to put this all in your model. The css approach is perhaps a nice trick, but is not very scalable.

In particular you would end up putting state in the css file, and part of it even twice. Keep it all in your model, put the full content into the screen, and then just attach a class when contracted, which sets a max height and truncates the rest with elipsis