Quick look at it.
I have given (blue) the 3 buttons each a class name. i.e itunes, amazon and spotify
When the button is clicked it will run a JS function. And then do the other two actions you had set.
The rectangle has some innerHTML that is a iframe with a blank src.
The rectangle has been given a class name of ‘iframer’
The elements just mentioned are all in the group ‘3-Playlist Blue’.
This helps since we can also give the group the class name of ‘playlist’
The js. that runs when a button is clicked.
// find which class of button made this call
var thisbutton = element.classList
//-- get the buttons group by class name
var playlist = element.closest('.playlist')
//-- get the groups iframe
var thisIframe = playlist.querySelector('.iframer > iframe')
//-- use the buttons class to change the src of the iframe
thisIframe.src = 'itunes.html'
thisIframe.src = 'amazon.html'
thisIframe.src = 'spotify.html'
parent.hype.zip (1.6 MB)
example export.zip (1.8 MB)