What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Issue handling odd and even instances of a js-timeline_item ag-timeline_item object


New member
Hi all,

I have recently been learning HTML / CSS / Javascript and learning techniques from various sources on the internet and youtube and came across a really good timeline example by Alvaro Trigo. I made an attempt to add some extra entries to the timeline and ran into a number of formatting issues that to date I have been unable to troubleshoot. The premise of the timeline is that the newest entry is at the top so 2023 at the top and 2015 at the bottom.

With reference to the image attached, I will call the entries in the timeline 1, 2, 3, and 4 etc these are folded/collapsed, but contain all the information associated with the entry in the timeline such as:

card_img-box with the src for the image
card_desc - where the main text of the entry would go

When playing around with the HTML file, I tried adding a new entry by copying and pasting the first one (1 in the image) and edited the various items listed above. I then ran the HTML, CSS, and Javascript and to my surprise the formatting went crazy. I then looked at the HTML a little more closely and realised the code used in the HTML is subtly different between the entries that are odd and those that are even. As long as I maintain this alternating pattern in the HTML, I am able to get the formatting working, but if for example I only want to add 1 entry to the timeline, it means I end up needing to change the code for all the other entries. If the timeline gets so long that it has like 100 entries, I can see it being a real pain to change them all.

Is there a more efficient way to code this? I understand in the CSS there are references to odd and even pseudo classes, but have not been able to get them working.

Happy to share more screenshots / create some extra diagrams to convey my message.

Kind regards,


  • timeline-ie (AlvaroTrigo).zip
    67.6 KB · Views: 1
  • js-timeline_item ag-timeline_item entries.png
    js-timeline_item ag-timeline_item entries.png
    314.8 KB · Views: 1