Skip to main content

hey guys,

excuse me if i sound really really clueless in this post - i’m not a developer and this is my first attempt at designing a website since 6th grade, so please bear with me.

i am attempting to build a landing page with two different little widgets on it:  

an FAQ accordion widget (https://websales.gumroad.com/l/unbounce-accordion-faq)

a carousel for testimonials 


my problem is - i cannot get both working at the same time.  i did some quick google searching and realized it may be because i was trying to run two different versions of jQuery.  so, i updated the javascript of the jQuery for the testimonial carousel to be the same version of jQuery as the accordion widget - still no luck.

when i remove the FAQ accordion javascript - the testimonial widget works.  when i remove the testimonial widget - the FAQ accordion works.

is there a clean way to integrate both of these?

here is the javascript code for the FAQ:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
$.fn.accordion=function(){return this.each(function(){var e=this;this.accordionHeight=$(e).height(),this.acc_wrapper=$(e).closest(".lp-element"),this.acc_wrap_height=e.acc_wrapper.height(),this.acc_top=e.acc_wrapper.position().top,this.blocks1=b],this.acc_block="",$(".lp-positioned-content>.lp-element").each(function(c,t){!$(t).is(e.acc_wrapper)&&$(t).position().top>e.acc_top&&e.blocks1.push(t)}),$("#lp-pom-root>.lp-element").each(function(c,t){var i=$(t).position().top;if(i<e.acc_top&&i+$(t).height()>e.acc_top)return e.acc_block=$(t),!1}),this.collapse_page=function(){var c=$(e).height(),o=c-e.accordionHeight;e.accordionHeight=c,e.acc_wrap_height<c?e.acc_wrapper.height(c):e.acc_wrapper.height(e.acc_wrap_height),e.acc_block.height(e.acc_block.height()+o),e.acc_block.find("div").each(function(c,t){$(t).height($(t).height()+o)}),$.each(e.blocks1,function(c,t){var i=$(t).position().top+o;$(t).css("top",i+"px")})},$(e).find(".collapsed").each(function(){let c=$(this).closest(".card").find(".collapse");c.css("max-height",ce0].scrollHeight),setTimeout(function(){e.collapse_page()},100)}),$(this).on("click",".btn-link",function(){let c=$(this).closest(".card").find(".collapse");$(e).find(".collapse").css("max-height",""),$(this).hasClass("collapsed")||($(e).find(".btn-link").removeClass("collapsed"),c.css("max-height",ce0].scrollHeight)),$(this).toggleClass("collapsed"),setTimeout(function(){e.collapse_page()},100)})})},$(".j-accordion").accordion();
</script>


and here is the javascript code for the testimonial widget: 

 

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

thank you so much!

marc

Hi @squishmytomato, 

You only need to call the jquery once per page. No need to include it with every script unless the script requires a particular jQuery version.  

Now, based on what you’ve shared above (the FAQ JS) requires 3.5.1. and the testimonial slider requires 2.2.4. 

Does the console of your browser throw up an error when you have both scripts on the same page?

You might have a conflict between the two scripts.  

 

hey @Hristian thank you for the response!

when i load the page with both of the scripts:  the FAQ works and the testimonial script does not.  there are no error messages when i run both of them, the testimonial script just does not work.

when i delete the FAQ script:  the testimonial script works.

the FAQ i am using 3.5.1, and the testimonial works using 3.5.1 or any other version (as long as the FAQ isn’t running).

one note:  the FAQ is running 3.5.1 slim.min, and the testimonial is running 3.5.1 min.  not sure if this matters, but can’t get the testimonial to work running 3.5.1 slim.min.

welllp, i removed the “script” tag in the FAQ calling on jQuery… and now they both work!

thank you!

welllp, i removed the “script” tag in the FAQ calling on jQuery… and now they both work!

thank you!


Happy you were able to figure it out.  

Reply


Terms & ConditionsCookie settings