How to set a display toggle in an array with pure javascript

Question

I want to personalize a CMS for FAQ. I need to display the 4 first questions and set a button to toggle the display of the other questions.

I'm using that function to display the questions:

function toggleViewMoreLess() {    
    let articlesRequestPromise = fetch("/api/v2/help_center/fr-fr/articles.json");
     let articlesArray = [];
     let arrayOfSectionLinks = document.getElementsByClassName('article-list');

     articlesRequestPromise.then(response => {
       return response.json(); 
     }).then(results => {
       articlesArray = results.articles;
       for (let i = 0; i < arrayOfSectionLinks.length; i++) {
         let aId = JSON.parse(arrayOfSectionLinks[i].id);

       let threeArticles = articlesArray.filter(article => article.section_id === aId).slice(0, 3);

           threeArticles.map(function (article) {
                let articleLink = document.createElement("a"); 
                articleLink.type = 'link';
                articleLink.innerText = article.title;
                articleLink.className = 'article-list-link';
                articleLink.href = article.html_url + "_" + article.section_id;
                return (
                    arrayOfSectionLinks[i].append(articleLink)
                )
            });
       }
    }) 
 }
 toggleViewMoreLess();

The idea I have and I can't achieve is to set a display none on the each section's array after index 3 and to set a ternary condition on the button for the toggle. I'm more use to work with react than vanilla js so I'm kind of lost.

Ideally, I would like to do something like with useState

Answer 1

If your array is an array of HTML elements have you considered just using CSS for this? eg if you have an array of p tags:

p:nth-child( n+4 ).no-display {
  display: none;
}

Then conditionally apply the class "no-display" to your tags