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