EntropyStarRover

05. Acordion

Feb 26th, 2021 (edited)
325
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function toggle() {
  2.     console.log("hello")
  3.     let articleSection=Array.from(document.getElementsByTagName("section"))[0];
  4.     articleSection.innerHTML="";
  5.  
  6.     //fetch all articles
  7.     var requestOptions = {
  8.         method: 'GET',
  9.         redirect: 'follow'
  10.       };
  11.      
  12.       fetch("http://localhost:3030/jsonstore/advanced/articles/list", requestOptions)
  13.         .then(response => response.json())
  14.         .then(result => populate(result))
  15.         .catch(error => console.log('error', error));
  16.  
  17.  
  18.         function populate(result){
  19.             console.log(result)
  20.             result.forEach(a => {
  21.            
  22.                 let divAcordeon=document.createElement("div");
  23.                 divAcordeon.className="accordion"
  24.                 let headDiv=document.createElement("div");
  25.                 headDiv.className="head";
  26.                 headDiv.textContent=a.title;
  27.  
  28.                 let buttonSpan=document.createElement("span");
  29.                 buttonSpan.className="button";
  30.                 buttonSpan.textContent="More";
  31.                 headDiv.appendChild(buttonSpan);
  32.                
  33.                 let extraDiv=document.createElement("div");
  34.                 extraDiv.className="extra";
  35.                 let contentP=document.createElement("p");
  36.                 contentP.textContent="defaultContent";
  37.  
  38.                 buttonSpan.addEventListener("click", ()=>(populateParagraph(buttonSpan,a._id,contentP,extraDiv)));
  39.        
  40.                
  41.                 divAcordeon.appendChild(headDiv);
  42.            
  43.                 extraDiv.appendChild(contentP);
  44.                 divAcordeon.appendChild(extraDiv);
  45.        
  46.                 articleSection.appendChild(divAcordeon);
  47.              
  48.        
  49.             });
  50.        
  51.        
  52.  
  53.         }
  54.                
  55.      
  56.  
  57.         function populateParagraph(button,id,paragraph,extraDiv){
  58.             if (button.textContent=="More"){
  59.             fetch(`http://localhost:3030/jsonstore/advanced/articles/details/${id}`, requestOptions)
  60.             .then(response => response.json())
  61.             .then(result => {
  62.                 paragraph.textContent=result.content;
  63.                 extraDiv.style.display="block";
  64.                 button.textContent="Less";
  65.             })
  66.             .catch(error => console.log('error', error));
  67.  
  68.         } else {
  69.             extraDiv.style.display="none";
  70.             button.textContent="More";
  71.         }
  72.         }
  73.        
  74. }
  75.  
  76.  
  77.  
  78.  
  79. toggle()
  80.  
RAW Paste Data