title: Displaying data from API in accordion
body: <p>I have some data from an API which I'm displaying on my web page. I've also got some simple HTML for an accordion. I have 4 lots of data and I want to display only one lot per slide on the accordion.
  How would I do this? I would like to know how to separate the data for each slide based on my code.</p>
  
  <pre><code>$( function() {
    $( "#top-stories" ).accordion();
  });
  
  fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key='')
  .then((resp) =&gt; resp.json())
  .then(function(data) {
     const accordionSlides = document.querySelectorAll(".accordion-slide");
     data.results.slice(0, 4).forEach((accordion, i) =&gt; {
      accordionSlides[i].innerHTML = `
        &lt;h1&gt;${accordion.title}&lt;/h1&gt;
        &lt;p&gt;${accordion.url}&lt;/p&gt;
        &lt;p&gt;${accordion.abstract}&lt;/p&gt;
        &lt;p&gt;${accordion.published_date}&lt;/p&gt;
        &lt;img src="${accordion.multimedia[4].url}"/&gt;`;
    })
  
  })
  </code></pre>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
          &lt;link rel="stylesheet" href="styles.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;script src="index.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="top-stories"&gt;Top Stories&lt;/h1&gt;
              &lt;h3 class="accordion"&gt;Story 1&lt;/h3&gt;
              &lt;div class="panel"&gt;
                  &lt;div class="accordion-title"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;h3 class="accordion"&gt;Story 2 - Collapsed&lt;/h3&gt;
              &lt;div class="panel"&gt;
                      &lt;div class="accordion-title"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;h3 class="accordion"&gt;Story 3 - Collapsed&lt;/h3&gt;
              &lt;div class="panel"&gt;
                      &lt;div class="accordion-title"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;h3 class="accordion"&gt;Story 4 - Collapsed&lt;/h3&gt;
              &lt;div class="panel"&gt;
                      &lt;div class="accordion-title"&gt;&lt;/div&gt;
              &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>