I am attempting to change the class of an iframe (soundcloud embedded track) when it is clicked, in order to apply different properties. However, my code doesn't seem to be working as expected. Here is what I have:
Here is a snippet from my index.html file:
<script src="javascripts/jquery.min.js"></script>
<iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&color=00ffc6&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_artwork=false&show_reposts=false"></iframe>
<script>
$('#soundcloudtrack').click(
function (v) {
$(this).toggleClass('soundcloud soundcloudext');
/*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
}
);
</script>
And this is how I have styled it in style.css:
.soundcloud{
z-index:99997;
width:100%;
height:62px;
opacity:0.25;
}
.soundcloudext{
z-index:99997;
width:100%;
height:135px;
opacity:1;
}
Despite trying different approaches like using getElementById, the functionality is still not working. Can someone offer some guidance or assistance?