Accordions

async function solution() {

    const main = document.getElementById('main');
    const url = `http://localhost:3030/jsonstore/advanced/articles/list`;
    const response = await fetch(url);
    const data = await response.json();

    data.forEach(a =>{
       let divAccordion = createElement('div','',['class','accordion']);
       let divHead = createElement('div','',['class','head']);
       let span = createElement('span',a.title);
       let button = createElement('button','More',['class','button','id',a._id])

       let divExtra = createElement('div','',['class','extra']);
       let p = createElement('p')

       button.addEventListener('click',toggle);

       divExtra.appendChild(p);
       divAccordion.appendChild(divExtra)
       divHead.appendChild(button);
       divHead.appendChild(span);
       divAccordion.appendChild(divHead)
       main.appendChild(divAccordion);
    });

    async function toggle(ev){
        const accordion = ev.target.parentNode.parentNode;

        const p = ev.target.parentNode.parentNode.children[0].children[0];

        const extra =ev.target.parentNode.parentNode.children[0]
        console.log(extra)

        const id = ev.target.id;
        const url = `http://localhost:3030/jsonstore/advanced/articles/details/${id}`;

        const response = await fetch(url);
        const data = await response.json();

        p.textContent = data.content;

        const hidden = ev.target.textContent === 'More';

        extra.style.display = hidden ? 'block':'none';
        ev.target.textContent = hidden ? 'Less':'More';

    }


    function createElement(type, content, attributes = []){

        const element = document.createElement(type);

        if(content){
            element.textContent = content;
        }

        if(attributes.length > 0){
            for(let i = 0;i<attributes.length;i+=2){
                element.setAttribute(attributes[i],attributes[i+1])
            }

        }
        return element;

    }

}
solution()