Click text to change image using Elementor

Click text to change image using Elementor

Initial Image Show/Hide CSS

  1. selector .all-img{
  2. display: none;
  3. }
  4. selector .img-1{
  5. display: block;
  6. }

Text Data Attribute

  1. data-showme|img-1

Dynamic Image Hide/Show JS

  1. <script src=“https://code.jquery.com/jquery-3.6.0.min.js”></script>
  2. <script>
  3. var $ = jQuery
  4. $(document).ready(function(){
  5. $(‘[data-showme]’).hover( function(){
  6. event.preventDefault();
  7. var showme = $(this).attr(‘data-showme’)
  8. $(‘.all-img’).hide()
  9. $(‘.’ + showme).show()
  10. })
  11. })
  12. </script>

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest tutorials

Freelancer Mojibur
freelancer mojibur

Start a Project!

Interested in working together? Send a quick message or schedule a meeting. Ask questions, discuss details, and decide if we are a good fit.

Website Project Inquiry

This form helps me get a general idea. We’ll schedule a meeting soon to discuss everything in more detail!

Freelancer Mojibur

Contact person

For quick communication email at: freelancermojibur@gmail.com