Custom Accordion breaks lightbox

Support
#1

I have a custom accordion on my site because I need it to do extras that the x accordion does not do… i use the following code in my functions.php to get my accordion working

function accodion_js_enqueue() {
if ( !is_admin() ) {
	wp_enqueue_script('jquery-ui-accordion');
  	wp_enqueue_script('custom-accordion',get_stylesheet_directory_uri() . '/js/accordion.js', array('jquery') );
	}
}
add_action('wp_enqueue_scripts', 'accodion_js_enqueue');

with this code removed the lightbox works, any ideas as to what causes it to break my lightbox? You can see it on my staging site right under the title “The Dipping Stone” on this page: https://stage.mydipkit.com/info/#the-dipping-stone

#2

Hello There,

Thanks for writing in! Please make sure that you have uploaded accordion.js file in the correct location in your child theme. At the moment, it doesn’t exist: https://stage.mydipkit.com/wp-content/themes/pro-child/js/accordion.js

Please let us know how it goes.

#3

Oops, I copied the wrong function, I was messing with it to see if it made a difference where I stored my script, but it didn’t, I run this “accordion.js” script from the Pro JS in theme options…

jQuery(function($){
  
  //Nested Accordion on FAQ
  $('.accordion').accordion({
      autoHeight: false,
      collapsible: true,
      heightStyle: "content",
      active: false,
      animate: 300
  }); 
});

This is the function I am running:

function accodion_js_enqueue() {
if ( !is_admin() ) {
	wp_enqueue_script('jquery-ui-accordion');
	}
}
add_action('wp_enqueue_scripts', 'accodion_js_enqueue');

with the same issue, accordions work great, lightbox is broken.

#4

Hello There,

On this page: https://stage.mydipkit.com/info/#the-dipping-stone, I am not seeing any accordion or the image where I could trigger the lightbox. Would you mind to guide me how I can test out the lightbox or the accordion? And by the way, I noticed that you are using pagespeed. Could you please disable it first so that we can thoroughly investigate and find out what is causing this issue?

Thank you.

#5

If you go to https://stage.mydipkit.com/info/#the-dipping-stone you will see a title “The Dipping Stone” and sub title “The next level of our Hydrographic dip kit.” you may have to scroll up a little, the link drops down too far and I have not been able to fix that yet.

You will see a Paint gun, it is purple and white, clicking on it does NOT open the lightbox but it should open the lightbox. Here is my lightbox code:

<a class="whaaaat" href="https://stage.mydipkit.com/wp-content/uploads/Kit-HVLP-Gun.jpg"><img src="https://stage.mydipkit.com/wp-content/uploads/Kit-HVLP-Gun-150x150.jpg" alt="" width="150" height="150" class="alignnone size-thumbnail wp-image-75598" /></a>
[lightbox selector=".whaaaat"]

The accordion can be found on https://stage.mydipkit.com/faq/

#6

Hi there @LiquidPrintOne,

Thanks for writing back, I’ve checked both URL’s and there is nothing obvious as to why your lightbox isn’t working.

However the HTML markup for the lightbox isn’t correct when looking at the source code, for testing purposes can you try this instead please?

[image src="https://stage.mydipkit.com/wp-content/uploads/Kit-HVLP-Gun.jpg" link="true" lightbox_caption="Testing"]
[lightbox]

Thank you!

#7

I updated the code, just as an FYI the reason I had the code like it was is because i wanted a thumbnail image to click on then a full image to load in the lightbox.

It is updated now but lightbox is still not working.

#8

Hi there,

I’ve checked the page and it appears to be caused by this custom javascript:

//Smooth Scroll for nav links
  var $root = $('html, body');
  $('a').click(function() {
      var href = $.attr(this, 'href');    
      $root.animate({
          'scrollTop': $(href).offset().top - navHeight 
      }, 1000, function () {
          window.location.hash = href;
      });
      return false;
  });

That return false; statement is effectively preventing any other javascript from running event handlers on click. Can you try updating to this version instead?

//Smooth Scroll for nav links
  var $root = $('html, body');
  $('a[href^=#]').click(function() {
      var href = $.attr(this, 'href');    
      $root.animate({
          'scrollTop': $(href).offset().top - navHeight 
      }, 1000, function () {
          window.location.hash = href;
      });
      return false;
  });

That should scope down the scrolling javascript to only target links that begin with # instead of all links.

#9

@alexander

Thanks for that, I did not realize it was causing my issue! It fixed it,Thanks!

Any chance you can look into why when clicking on one of the # links the scroll bounces?

#10

Hi there,

I am sure you will understand that the last request is outside of the scope of our support as it is completely related to a custom code Javascript you have on your website.

I suggest that you look into the animate function you used in jQuery as it sometimes does not work correctly if you do not use the stop function.

Kindly read this article to know more about the stop function and how it can be helpful on jQuery animations:

https://api.jquery.com/stop/

Thank you for your understanding.