Toggle Between Icons and Images On Click With Elementor

Facebook
Twitter
Reddit
WhatsApp

Toggle Icon Javascript

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

Toggle Icon CSS

				
					.toggle-pause .elementor-icon i::before{
    content: '\f04c';
}
				
			

Toggle Image Javascript

				
					<script>
const imageElement = document.querySelector('.image-toggle');
imageElement.addEventListener('click', function(){
    imageElement.classList.toggle('new-img');
});
</script>
				
			

Toggle Image CSS

				
					.new-img img{
    content:url('');
}
				
			
Subscribe
Notify of
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tasleem
10 months ago

Hi, thanks for above code. When I am using above code ‘\f04c’ or any other, on click disappears. When click again the previous icon appears again. kindly advise solution.

More to explorer

How to run Javascript on your Elementor popup

https://youtu.be/WA9v_YrylIU jQuery jQuery(window).load(function() { jQuery.each( elementorFrontend.documentsManager.documents, ( id, document ) => { if ( document.getModal ) { // It’s a popup document

2
0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.