Here's my query: I have a slider on my website where each slider item consists of an image and a Bandcamp iframe link. Below is an example code of one of the slider items:
<div class="tapecol col-md-4">
<img class="media-object round" id="compi7" src="images/artworks/ep/compilation7.png">
<div class="eptitle">
</div>
<row class="caption-row">
<iframe class="bandcamp" id="compi7bandcamp">"IFRAMECODE"</iframe>
</row>
</div>
Currently, when a user clicks on the image (id="compi7"), the corresponding iframe (id="compi7bandcamp") is displayed. But I have been writing separate functions for each item to ensure that only the iframe of the clicked item is visible.
Initially, I had 5 items, so I created a separate function for each. Now that I have 11 and more items are expected, I want to streamline this to have a single function to handle all items.
$(document).ready(function(){
$(".media-object").click(function(event){
var id = $(this).attr('id');
$('#' + id + 'bandcamp').slideToggle(500);
});
});
How can I achieve this goal of using one function for every item in my slider?