function toggle() {
    console.log("hello")
    let articleSection=Array.from(document.getElementsByTagName("section"))[0];
    articleSection.innerHTML="";

    //fetch all articles
    var requestOptions = {
        method: 'GET',
        redirect: 'follow'
      };
      
      fetch("http://localhost:3030/jsonstore/advanced/articles/list", requestOptions)
        .then(response => response.json())
        .then(result => populate(result))
        .catch(error => console.log('error', error));


        function populate(result){
            console.log(result)
            result.forEach(a => {
           
                let divAcordeon=document.createElement("div");
                divAcordeon.className="accordion"
                let headDiv=document.createElement("div");
                headDiv.className="head";
                headDiv.textContent=a.title;

                let buttonSpan=document.createElement("span");
                buttonSpan.className="button";
                buttonSpan.textContent="More";
                headDiv.appendChild(buttonSpan);
                
                let extraDiv=document.createElement("div");
                extraDiv.className="extra";
                let contentP=document.createElement("p");
                contentP.textContent="defaultContent";

                buttonSpan.addEventListener("click", ()=>(populateParagraph(buttonSpan,a._id,contentP,extraDiv)));
        
               
                divAcordeon.appendChild(headDiv);
            
                extraDiv.appendChild(contentP);
                divAcordeon.appendChild(extraDiv);
        
                articleSection.appendChild(divAcordeon);
              
        
            });
        
        
 
        }
               
      

        function populateParagraph(button,id,paragraph,extraDiv){
            if (button.textContent=="More"){
            fetch(`http://localhost:3030/jsonstore/advanced/articles/details/${id}`, requestOptions)
            .then(response => response.json())
            .then(result => {
                paragraph.textContent=result.content;
                extraDiv.style.display="block";
                button.textContent="Less";
            })
            .catch(error => console.log('error', error));
  
        } else {
            extraDiv.style.display="none";
            button.textContent="More";
        }
        }
        
}




toggle()