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
15 Replies
What have you tried? What's your current code look like? Do you have a minimal example in a codepen?
@13eck let me make one quickly! Also sorry for late response, had to go do something quickly
@13eck https://codepen.io/MatejR/pen/rNoWeaE should be enough 😄 sorry it took a bit, I had to rewrite all Tailwind classes and whatnot
Maybe you are looking for
<detail>?I’m at work so I can’t do any code, but my suggestions to try are as follows:
* Use
::before pseudo-elements for the left border
* Have the horizontal line be either the top or bottom border and use absolute position to move it up/down to the center
* Use :first-child/:last-child to move the first/last element’s border radius
* Use the details element to show/hide the info
* Have the circle be the content of the pseudo elementI remember trying with that but it still had that issue with the last item extending the left border
Hmmm, good idea for the
before suggestion! But wouldn't still that face me with the issue of the horizontal lines disconnecting from the border? Or am I understanding something wrong?
Soo this for the third point, I guess I would use a pseudo element to achieve that rounded corner/border radius?
@13eck sorry for small nudge but could you maybe confirm my guesses/points?Yeah, sorry, long day yesterday. Give me a few minutes to bang out a codepen
No worries and I actually managed to do it 😄
I had to research a bit on what you actually meant, but I managed to do it 🙂
It's not pretty, but it works!
https://codepen.io/c__beck/pen/qBLqMoG
It's DEFINITELY good enough, thank you so much!!!
There's a lot of magic numbers in there, so if you want to do more with it you'll probably have to figure out a better way to do it :p
Hahaha I noticed, don't worry, it makes me feel a bit better for my first solution because that one also involved magic numbers 😄
Quick note: I went with ⭕️ and 🔴 for emojis since they're the same size. That made using magic numbers easier as I didn't have to account for differently-sized icons. If you use something else be sure to have them be the same size for ease of use.
One cool thing about
list-style is that you can pass an image via url("image_here.png") so you can make your own!I noticed that, it's definitely a really cool solution actually, might just steal that one 🙂