Resolved: How to click on the first

automatically when I come to the page?

<div class="row" data-aos="fade-up">
    <div class="col-lg-12 d-flex justify-content-center">
     <ul id="portfolio-flters">
        <li data-filter=".filter-journal">Journal articles</li>
        <li data-filter=".filter-wp">Working papers</li>
        <li data-filter=".filter-conferences">Conferences</li>              
     </ul>
   </div>
</div>

  window.addEventListener('load', () => {
    let portfolioContainer = select('.portfolio-container');
    if (portfolioContainer) {
      let portfolioIsotope = new Isotope(portfolioContainer, {
        itemSelector: '.portfolio-item'
      });

      let portfolioFilters = select('#portfolio-flters li', true);

      on('click', '#portfolio-flters li', function(e) {
        e.preventDefault();
        portfolioFilters.forEach(function(el) {
          el.classList.remove('filter-active');
        });
        this.classList.add('filter-active');

        portfolioIsotope.arrange({
          filter: this.getAttribute('data-filter')
        });
        portfolioIsotope.on('arrangeComplete', function() {
          AOS.refresh()
        });
      }, true);
    }

  });

on('click', '#portfolio-flters li', function(e) {
    e.preventDefault();
    portfolioFilters.forEach(function(el) {
        el.classList.remove('filter-active');
    });
    this.classList.add('filter-active');

    portfolioIsotope.arrange({
        filter: this.getAttribute('data-filter')
    });
    portfolioIsotope.on('arrangeComplete', function() {
        AOS.refresh()
    });
}, true);

let portfolioFilters = select('#portfolio-flters li', true);
// Click on the first li element
portfolioFilters[0].click();