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
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tasleem
1 year 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.

11 months ago
Reply to  Tasleem

Try to add the following in icon switch css:

font-family: “Font Awesome 5 Free”;
font-weight: 900;

The above addition worked for me.

More to explorer

How To Make a Hover Card Like a PRO in Elementor

https://youtu.be/pja-7Sfn8WI CSS selector .card-content{ height: 56%; margin-bottom: -134px; transition: all 0.5s ease; } selector .card-wrapper:hover .card-content{ margin-bottom: 0px; height: 100%; } selector

Elementor Button Border Gradient Tutorial

https://youtu.be/I9am2K_yopc Border Gradient Button CSS selector .elementor-button{ position: relative; overflow: hidden; z-index: 1; margin-bottom: -15px } selector .elementor-button:before{ content: ”; position: absolute;

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

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.