Change image on accordion tab click in Elementor Pro
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 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?
Thank you for helping people who don't use Pro.
Great video. I was looking for this and found it. Thanks for your amazing content. Keep them coming!!!
Muito obrigado, salvou um brasileiro😀
Nice! Thanks for sharing this Elementor trick!
Got you!
thank you, this worked perfectly
Great & Easy Method, Thank You, Uriel Soto :)
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?
Very HELPFUL!! THANK YOUU!
Thanks, just what I was looking for!
Thank you so much brother
You're the best
thank u, great tutorial.
This is SUPER dude!
Thank you!
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'});
Hi thx for the great content.
How can I use this metod to change a Elementor video block?
Great Tutorial, thank you very much.
Thanks love what i do
Thank you and subsribed your channel 👍👍👍👍👍👍
Is it possible to add animation for images on change? If so, please share code. Thank you :)
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
Very cool!
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?
how can I use video instead img?
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?
I need two of these accordions on the same page. It's not working under this instance.
I'm wondering if this mobile responsive too?
Yes it should
Gracias
Can we do same with video?
Thanks bro !
I used it divi
How do I have to edit the code, when I have more than 1 of these accordions on one singe page?
testei exatamente como no vídeo e não funcionou
Eu também!
And how does it look on mobile view?
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.
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
no work in firefox
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.
Tried this but nothing worked.
I can't see any css to animate image while loading. It's just simply change.
not working in firefox, demonstrate with elementor pro
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 can I use this metod to change a Elementor video block?
I found it!
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
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
How to add multiple images?
I'll have something coming out soon.