Change image on accordion tab click in Elementor Pro

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 พ.ย. 2024

ความคิดเห็น • 68

  • @oOKiniaKissOo
    @oOKiniaKissOo 4 หลายเดือนก่อน +2

    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!!

    • @dannymichael9793
      @dannymichael9793 2 หลายเดือนก่อน

      Can you share your modified jQuery code?

  • @anupamajosh
    @anupamajosh 10 หลายเดือนก่อน +1

    Great video. I was looking for this and found it. Thanks for your amazing content. Keep them coming!!!

  • @shreyankputhran2396
    @shreyankputhran2396 ปีที่แล้ว

    Thank you for helping people who don't use Pro.

  • @LytboxStudio
    @LytboxStudio 2 ปีที่แล้ว +5

    I dig this method for the switching images. Another good one! Cheers!

    • @UrielSoto
      @UrielSoto  2 ปีที่แล้ว +1

      Thanks man! Nice to see you here

    • @dzakiahsana6
      @dzakiahsana6 2 ปีที่แล้ว

      @@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?

  • @matheuss1810
    @matheuss1810 ปีที่แล้ว +3

    Muito obrigado, salvou um brasileiro😀

  • @mageshraja4187
    @mageshraja4187 ปีที่แล้ว +1

    Great & Easy Method, Thank You, Uriel Soto :)

  • @dbyuuri
    @dbyuuri 8 หลายเดือนก่อน

    Very HELPFUL!! THANK YOUU!

  • @combinedcreative
    @combinedcreative 10 หลายเดือนก่อน +2

    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?

  • @gracegroenewald
    @gracegroenewald ปีที่แล้ว

    Thanks, just what I was looking for!

  • @potokipaul
    @potokipaul 5 หลายเดือนก่อน

    thank you, this worked perfectly

  • @viniciuspalu
    @viniciuspalu 2 ปีที่แล้ว +1

    Hi thx for the great content.
    How can I use this metod to change a Elementor video block?

  • @WickyDesign
    @WickyDesign 2 ปีที่แล้ว

    Nice! Thanks for sharing this Elementor trick!

  • @lodeluyckx
    @lodeluyckx ปีที่แล้ว

    Thank you!

  • @NiharSajal
    @NiharSajal ปีที่แล้ว

    Thank you so much brother

  • @fernandovalle05
    @fernandovalle05 ปีที่แล้ว

    thank u, great tutorial.

  • @DipeshSharma93
    @DipeshSharma93 ปีที่แล้ว +1

    Is it possible to add animation for images on change? If so, please share code. Thank you :)

  • @prokassim
    @prokassim 2 ปีที่แล้ว

    Great Tutorial, thank you very much.

    • @UrielSoto
      @UrielSoto  2 ปีที่แล้ว

      Thanks love what i do

  • @dzakiahsana6
    @dzakiahsana6 2 ปีที่แล้ว

    This is SUPER dude!

  • @aryahmdm
    @aryahmdm ปีที่แล้ว +5

    is there any css to make the image fade in/out whenever we switch between image? This is a great tutorial btw, thank you!

    • @zamilahamed
      @zamilahamed ปีที่แล้ว

      After this line: jQuery(".toggle-img img").attr('src',img)
      Add this code:
      .animate({opacity: '0'}).animate({ opacity: '1'});

  • @AadityaSharmas
    @AadityaSharmas ปีที่แล้ว

    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?

  • @pedrosanhueza7747
    @pedrosanhueza7747 6 หลายเดือนก่อน

    You're the best

  • @watchandlearn7945
    @watchandlearn7945 ปีที่แล้ว

    Thank you and subsribed your channel 👍👍👍👍👍👍

  • @tabeascherling6786
    @tabeascherling6786 ปีที่แล้ว

    How do I have to edit the code, when I have more than 1 of these accordions on one singe page?

  • @TerryApodaca
    @TerryApodaca 2 ปีที่แล้ว +2

    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?

    • @rikderks
      @rikderks ปีที่แล้ว +1

      Have your desired first image as the accordeon item no1

  • @PriyathamMuddala
    @PriyathamMuddala 11 หลายเดือนก่อน

    How do I do it for the Divi theme builder?

  • @DonDiablo_US
    @DonDiablo_US 11 หลายเดือนก่อน

    Gracias

  • @bySterling
    @bySterling ปีที่แล้ว

    Very cool!

  • @haley5501
    @haley5501 ปีที่แล้ว

    I need two of these accordions on the same page. It's not working under this instance.

  • @Uncaught_in_promise
    @Uncaught_in_promise 2 ปีที่แล้ว +1

    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

    • @UrielSoto
      @UrielSoto  2 ปีที่แล้ว

      Can you elaborate on this?

  • @GGT5323
    @GGT5323 2 ปีที่แล้ว

    Thanks bro !

    • @GGT5323
      @GGT5323 2 ปีที่แล้ว

      I used it divi

  • @ldelmar3875
    @ldelmar3875 ปีที่แล้ว

    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)

    • @UrielSoto
      @UrielSoto  ปีที่แล้ว

      Using the experimental feature called nested elements or just adding a elementor template shortcode

  • @rubenbad1869
    @rubenbad1869 2 ปีที่แล้ว

    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?

    • @UrielSoto
      @UrielSoto  2 ปีที่แล้ว +1

      Yes Ill add it to the list. Change image on hovering a different element

  • @nenadjovanovic1626
    @nenadjovanovic1626 ปีที่แล้ว

    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.

  • @sagargala6195
    @sagargala6195 หลายเดือนก่อน

    How can we add elementor template instance of image

  • @gtech7932
    @gtech7932 11 หลายเดือนก่อน

    Can we do same with video?

  • @bflsridersrepublic2999
    @bflsridersrepublic2999 2 ปีที่แล้ว

    Is it possible to reverse this so that when you click on an image it opens the accordion.

  • @secession77
    @secession77 ปีที่แล้ว

    And how does it look on mobile view?

  • @sergiopinna3818
    @sergiopinna3818 ปีที่แล้ว

    How can I use this metod to change a Elementor video block?

  • @ariefhanyy
    @ariefhanyy 4 หลายเดือนก่อน

    I'm wondering if this mobile responsive too?

    • @UrielSoto
      @UrielSoto  4 หลายเดือนก่อน

      Yes it should

  • @AwaisKhokhar02
    @AwaisKhokhar02 2 ปีที่แล้ว

    I can't see any css to animate image while loading. It's just simply change.

  • @justtubing3719
    @justtubing3719 ปีที่แล้ว +1

    Tried this but nothing worked.

  • @spinringsmusic8433
    @spinringsmusic8433 27 วันที่ผ่านมา

    elementor new update id has changed please check that when configuring script

  • @akhileshkesharwani9209
    @akhileshkesharwani9209 ปีที่แล้ว

    Brother this is not working with tab. have you made and tutorial on the same method using tab?

    • @UrielSoto
      @UrielSoto  ปีที่แล้ว

      Tab might use a different css class

  • @BrunoMucheroni
    @BrunoMucheroni ปีที่แล้ว +1

    no work in firefox

  • @mayavadstudiosadmin
    @mayavadstudiosadmin ปีที่แล้ว

    not working in firefox, demonstrate with elementor pro

  • @Moderator.
    @Moderator. ปีที่แล้ว +2

    Not working anymore.

    • @freereinveterans
      @freereinveterans ปีที่แล้ว

      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?

    • @ThatGuyBarrold
      @ThatGuyBarrold 11 หลายเดือนก่อน +1

      @@freereinveterans inspect the element. I had to update from "#elementor-tab-title-" to "#e-n-accordion-item-" and then it worked perfectly 👌😁

    • @dbyuuri
      @dbyuuri 8 หลายเดือนก่อน +1

      @@ThatGuyBarrold Thank you for your comment!! I was lost because it's not working but your comment is the solution to make it work.

    • @astralinerscity
      @astralinerscity 3 หลายเดือนก่อน +1

      @@ThatGuyBarrold saved the day, thanks

  • @luanafabianski2862
    @luanafabianski2862 11 หลายเดือนก่อน +1

    testei exatamente como no vídeo e não funcionou

  • @jessaesguerra5631
    @jessaesguerra5631 2 ปีที่แล้ว

    How to add multiple images?

    • @UrielSoto
      @UrielSoto  2 ปีที่แล้ว

      I'll have something coming out soon.