Change image on accordion tab click in Elementor Pro
Вставка
- Опубліковано 27 вер 2024
- Learn how to change an image whenever a user opens an accordion.
Source Code:
urielsoto.com/...
🟢 Email Technical Support:
urieljsoto.gum...
🔵 Video Call Technical Support:
urieljsoto.gum...
🔴 Download My Custom Templates:
urieljsoto.gum...
🔵 Join Our Facebook Community!
bit.ly/urielsot...
🟢 Hire Me:
urielsoto.com/...
🟢 My Web Agency:
vluxdesigns.com/
PRODUCTS I USE FOR MY WEBSITES:
🔴 Get Elementor Pro - My Favorite Page Builder
bit.ly/urielele...
CONTACT ME:
My Website: urielsoto.com/
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a
Omg I was fighting with chat gpt and copilot all day to tell me how to do it and they FAILED. I can't believe I didn't search on youtube earlier. with your video I did it in 10 minutes it wasn't even difficult. YT is always filled with heroes like you who don't wear capes 😂 You saved me thank you!!
Can you share your modified jQuery code?
I dig this method for the switching images. Another good one! Cheers!
Thanks man! Nice to see you here
@@UrielSoto Hii, i have problem. I use advanced accordion from essential addon cause need customize the content with save template. But this accordion nothing number like #elemenotor-tab-3435 do u have idea for this?
I noticed that Elementor changed its tags so now had to use "#e-n-accordion-item-" and it works perfectly.
However is there any way to get a smooth fadeIn of the image after you click?
Muito obrigado, salvou um brasileiro😀
is there any css to make the image fade in/out whenever we switch between image? This is a great tutorial btw, thank you!
After this line: jQuery(".toggle-img img").attr('src',img)
Add this code:
.animate({opacity: '0'}).animate({ opacity: '1'});
thank you, this worked perfectly
how can I use video instead img?
I need two of these accordions on the same page. It's not working under this instance.
Is it possible to use one function to change img src dynamically? Maybe create variable for img src and update it according to left link href
Can you elaborate on this?
How do I do it for the Divi theme builder?
Is it possible to reverse this so that when you click on an image it opens the accordion.
Great Tutorial, thank you very much.
Thanks love what i do
Thank you so much brother
And how does it look on mobile view?
thank u, great tutorial.
Tried this but nothing worked.
I'm wondering if this mobile responsive too?
Yes it should
Not working anymore.
I noticed the same unfortunately. The title "tab" labeling doesn't seem to exist anymore when I inspect. Looks like elementor updated their accordion widget and that may be part of the problem?
@@freereinveterans inspect the element. I had to update from "#elementor-tab-title-" to "#e-n-accordion-item-" and then it worked perfectly 👌😁
@@ThatGuyBarrold Thank you for your comment!! I was lost because it's not working but your comment is the solution to make it work.
@@ThatGuyBarrold saved the day, thanks
Nice work, Thanks. is it possible to get something similar but on hover! like using a icon box ou image box, 3 or 4 widgets, when we hover the text, the image change?
Yes Ill add it to the list. Change image on hovering a different element
Thank you and subsribed your channel 👍👍👍👍👍👍
I can't see any css to animate image while loading. It's just simply change.
How can I use this metod to change a Elementor video block?
I found it!
You're the best
Very cool!
Great tutorial, but I have one request/issue:
How can we change back to the very original image if the user closes all the tabs?
Have your desired first image as the accordeon item no1
Brother this is not working with tab. have you made and tutorial on the same method using tab?
Tab might use a different css class
no work in firefox
not working in firefox, demonstrate with elementor pro
Gracias
Thanks bro !
I used it divi
How to add multiple images?
I'll have something coming out soon.
testei exatamente como no vídeo e não funcionou
Eu também!
Is it possible to add animation for images on change? If so, please share code. Thank you :)
Great video. I was looking for this and found it. Thanks for your amazing content. Keep them coming!!!
Hi thx for the great content.
How can I use this metod to change a Elementor video block?
Great & Easy Method, Thank You, Uriel Soto :)
Hey man, got a more complicated problem so I thought if you have time you could help me. I have tabs, and above the tabs, actually the header pages that I want to be changed when the one of the tabs is clicked, I tried with slides but I'm new in this so I don't know how to connect them, I could try with images but I need template cuz there is text on that page, sorry for messy explanation, hope you see this.
It's working fine, if we want to replace not even an image but a div or full widget? (call to action elementor widget) then what will be code?
is there any solution that would not require coding? I basically just want the headlines on the left and the switch the content on the right (being different containers that I can edit and customize in elementor)
Using the experimental feature called nested elements or just adding a elementor template shortcode
How do I have to edit the code, when I have more than 1 of these accordions on one singe page?
Nice! Thanks for sharing this Elementor trick!
Got you!
Very HELPFUL!! THANK YOUU!
Thank you for helping people who don't use Pro.
Thanks, just what I was looking for!
Can we do same with video?
This is SUPER dude!
Thank you!