How can I achieve this collapsible timeline/tree
I asked not too long ago about this but in the end that didn't work out for me so I had to take a different approach.
I managed to get something working by making the left border be a div for itself and then making the specific elements such as horizontal line that connects that border and the little circle and then using some JS/TS code to show or hide the descriptions below the title.
There was also an issue where when opening the last timeline entry that would expand the div so I managed to sort of hack my way around it by calculating the height of that left border when all entries are closed and then when opening last entry it applies that height as a style to the left border.
That worked but I didn't take into consideration the mobile design where the title could go into new line. When that happens, it completely broke the whole design I had so far.
So I am asking here for some guidance/tips/whatever because I really can't seem to be able to figure out how to approach this.
Here is minimal example: https://codepen.io/MatejR/pen/rNoWeaE
I managed to get something working by making the left border be a div for itself and then making the specific elements such as horizontal line that connects that border and the little circle and then using some JS/TS code to show or hide the descriptions below the title.
There was also an issue where when opening the last timeline entry that would expand the div so I managed to sort of hack my way around it by calculating the height of that left border when all entries are closed and then when opening last entry it applies that height as a style to the left border.
That worked but I didn't take into consideration the mobile design where the title could go into new line. When that happens, it completely broke the whole design I had so far.
So I am asking here for some guidance/tips/whatever because I really can't seem to be able to figure out how to approach this.
Here is minimal example: https://codepen.io/MatejR/pen/rNoWeaE
