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:

iframe {
    display: none;
}

.podcast_item:active ~ iframe {
    display: block;
}

.podcast_item:active {
    display: none;
}

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?

Code for the podcast item and spotify embed:

<div
  v-for="(podcast, index) in content.podcasts"
  :key="index"
  class="swiper-slide"
>
  <PodcastsItem
    :imageUrl="podcast.image"
    :title="podcast.name
    :text="'Duur: ' + podcast.id + ' ms'"
    class="podcast_item"
  />
  <iframe
    style="border-radius:12px"
    :src="
    'https://open.spotify.com/embed/episode/' + podcast.id + '?utm_source=generator'"
    width="100%"
    height="232"
    frameBorder="0"
    allowfullscreen=""
    allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
  ></iframe>
</div>

What I have right now: Each postcast item has a spotify embed under it that is invisible

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.