Bootstrap timeline example w/ JQuery

[Alex-Toucan]

With the help of Bootstrap Documentation, I actually managed to create something.

Here's the HTML section with the help of the examples in the position section in utilities (it's the second example) and started from there. I renamed the numbers to years and changed .m-4 to a margin to 1.55rem so it can fit in my container properly. Please note .start-33 and .start-66 are not in Bootstrap by default, add them yourself with the additional CSS below. The IDs in the HTML example are used in the JavaScript code sample, if you want to change the ID names, also remember to rename them in the JavaScript. The percentage change here is 33.33333333 (1/3), change the percentage depending on how many entries are there.

<div class="position-relative" id="historyTab" style="margin: 1.55rem !important;">
  <div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height: 1px;" id="history-line">  
    <div class="progress-bar" style="width: 0%;" id="history-progress"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm rounded-pill btn-primary" id="history-1">2020</button>
  <button type="button" class="position-absolute top-0 start-33 translate-middle btn btn-sm rounded-pill btn-secondary" id="history-2">2021</button>
  <button type="button" class="position-absolute top-0 start-66 translate-middle btn btn-sm rounded-pill btn-secondary" id="history-3">2022</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm rounded-pill btn-secondary" id="history-4">2023</button>
</div>

Static image if you want a look.

This requires JavaScript and JQuery. You can try to turn it into raw JavaScript if you like. I left describing comments in there if you want to take a look.

$(document).ready(function() {
    // Initialize the active button and set btn-primary for past years
    let activeYear = 1;

    updateTimeline(activeYear);

    // Add click event handlers to timeline buttons
    for (let i = 1; i <= 4; i++) {
        $(`#history-${i}`).click(function() {
            if (i == activeYear) return;
            
            updateTimeline(i);
        });
    }

    // Function to update the timeline based on the selected year
    function updateTimeline(year) {
        // Remove the "active" class from all buttons
        for (let i = 1; i <= 4; i++) {
            $(`#history-${i}`).toggleClass("active", i == year).toggleClass("btn-secondary", i > year).toggleClass("btn-primary", i <= year);
        }


        // Update the progress bar width
        const progressBarWidth = (year - 1) * 33.33333333;
        $("#history-progress").css("width", `${progressBarWidth}%`);

        // Update the active year
        activeYear = year;
    }
});

Additional CSS to .start-33 and .start-66.

.start-33 {
  left: 33.33333333% !important;
}

.start-66 {
  left: 66.66666667% !important;
}

I'll post a video example of it working later.

Here's an example of me using it for the JavaScript part of tags.