05. Acordion

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()