Change Image on click In Elementor

is it possible to add multi play/pause button in the same page ?

I used this to create popup toggle button for a dropdown menu. Is there a way to make icon recognise if the popup is opened or not and adapt itself accordingly?

@UrielSoto
I am trying to implement this without Elementor Pro. Is there a way to go around the custom CSS section and just plant it in the html?

This really helps, Thanks a lot, what about transition time? how to add transition time? as on click hide /show section is also working with this, I need to set transition time on icon.

I have this issue: Uncaught SyntaxError: Identifier 'audioButton' has already been declared

.toggle-pause .elementor-icon i::before{
content: '\f04c';---I am really a bigginer, but want to have the toggle icon effect, it doesn't work here, ------.toggle-pause .elementor-icon i----where are these from? where to define these?

you still having your patreon weekly group calls?

When I press the play icon, the icon changes to the text "f04c" instead of the pause icon.

This worked well for me and I was able to adapt it perfectly for a hamburger icon that I wanted to change into a close button. What would be the best way to add an animated transition?

Thanks for the tutorial. How would you go about using dynamic images (from custom field, ACF or such) in the css? Is that possible?

Hi there, thanks for your video, that's what I'm looking for, but I'm unable to make it work.

I made new page, section, columns : inside HTML and icon widget

HTML content :
=============
<script>
const audioButton = document.querySelector('.audio-button');
audioButton.addEventListener('click', function(){
audioButton.classList.toggle('toggle-pause');
});
</script>

Icon
=======
CSS clases = audio-button
Custom CSS = .toggle-pause .elementor-icon i::before{
content: '\f04c';
}

I click on the button, but nothing happens. :/