Js conditional display on click

In your codebase there are some errors:

• window.onload should be a function that will be called when page and related stuff are already loaded. You’re trying to call displayFirstTab immediately without waiting for markup load event;
• Commonly, every code which interacts with a markup on the page should be used only when such markup is ready. That’s why I moved code which creates titles inside window.onload;
• Because you’re having only one text for the selected title at a time then it’s no sense to use appendChild. That’s why I change it to modifying innerText property of the element;
• You have a misunderstanding of how addEventListener works. You need to pass a function as an argument to addEventListener, and that function will be called when such an event will be triggered;

Here is the corrected:

    let about_me_data = [
        {
            "title": "Life",
            "text": "Nullam ac quam non risus dictum viverra non id massa. Donec rhoncus sem at leo iaculis, tempor facilisis sem porttitor. Praesent sit amet quam ultricies, vulputate odio hendrerit, dictum eros. Aenean mattis ultricies tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam imperdiet dolor et dignissim luctus. Morbi laoreet tempor feugiat."
        },
        {
            "title": "Education",
            "text": "Sed malesuada porta quam. Proin pretium eu augue vitae pellentesque. Nullam volutpat urna ac tellus bibendum tincidunt. Maecenas ultrices et nunc consectetur cursus. Suspendisse varius vitae risus sed aliquam. Cras nisi leo, scelerisque at dolor sed, sagittis eleifend nisl. Etiam id arcu luctus, vehicula arcu id, dictum nisi. Nullam aliquet ultricies erat. Vivamus a ultrices velit, ac malesuada elit."
        },
        {
            "title": "Experience",
            "text": "Integer non maximus arcu. Nullam ut odio quis ligula interdum consectetur. Aliquam dignissim eu nibh ut accumsan. Phasellus volutpat nibh lorem, ac efficitur justo cursus ut. Etiam sed rutrum elit. Aenean lacus velit, sollicitudin quis malesuada nec, vestibulum eu tortor. Aenean dapibus commodo nibh ac ornare."
        }
    ];

    function displayFirstTab(){
        document.getElementById('about-me-tabs-text').innerText = about_me_data[0].text;
    }

    function conditionalDisplay(i) {
        return function() {
            document.getElementById('about-me-tabs-text').innerText = about_me_data[i].text;
        }
    }

    window.onload = function() {
        displayFirstTab();

        for (i = 0; i < about_me_data.length; i++) {
            let title = document.createElement('p');
            title.innerHTML = about_me_data[i].title;
            title.setAttribute('class', 'about-me-tabs hvr-underline-from-center');
            title.addEventListener('click', conditionalDisplay(i));
            document.getElementById('about-me-tabs-titles').appendChild(title);
        }
    };

For this markup:

<div id="about-me-tabs-titles"></div>
<p id="about-me-tabs-text"></p>