title: On click of item in for loop show other element in for loop
body: <p>What I have is a for loop that shows podcast items.
  Each podcast item has a iframe with a Spotify embed. When you click on the podcast item, the podcast item should go invisible and the Spotify embed should pop up.
  I can kind of do this in css by using:</p>
  <pre><code>iframe {
      display: none;
  }
  
  .podcast_item:active ~ iframe {
      display: block;
  }
  
  .podcast_item:active {
      display: none;
  }
  </code></pre>
  <p>But when I do this, because of doing the active, it really bugs, because the spotify embed doesn't stay visible.
  My question is, how do I achieve this by using Javascript?</p>
  <p>Code for the podcast item and spotify embed:</p>
  <pre><code>&lt;div
    v-for=&quot;(podcast, index) in content.podcasts&quot;
    :key=&quot;index&quot;
    class=&quot;swiper-slide&quot;
  &gt;
    &lt;PodcastsItem
      :imageUrl=&quot;podcast.image&quot;
      :title=&quot;podcast.name
      :text=&quot;'Duur: ' + podcast.id + ' ms'&quot;
      class=&quot;podcast_item&quot;
    /&gt;
    &lt;iframe
      style=&quot;border-radius:12px&quot;
      :src=&quot;
      'https://open.spotify.com/embed/episode/' + podcast.id + '?utm_source=generator'&quot;
      width=&quot;100%&quot;
      height=&quot;232&quot;
      frameBorder=&quot;0&quot;
      allowfullscreen=&quot;&quot;
      allow=&quot;autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture&quot;
    &gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  <p>What I have right now:
  Each postcast item has a spotify embed under it that is invisible</p>
  <p>Expected result:
  When you click on a podcast item, the right iframe shows up under the podcast item, for example if you click the second podcast item, the second spotify embed shows up.</p>