Toggle Between Icons and Images On Click With Elementor

Share on facebook
Facebook
Share on twitter
Twitter
Share on reddit
Reddit
Share on whatsapp
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
0 Comments
Inline Feedbacks
View all comments

More to explorer

Elementor GSAP Text Split Reveal

https://youtu.be/ml7Mf5MRgTw Step 1 Add the class name text_reveal to the headline element Make sure the headline element HTML Tag is set to

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

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.