Slider Disappears When Including jQuery Accordion in Sidebar

[Charlie Harper]

Hello and thank you for your time.

This is in Jump Start framework.

What I am doing.
I am using the “Enhanced Text” plugin widget in the left side bar widget area so that I can include this PHP page with custom navigation.

<?php include 'http://nccbuild2.wooshdata.com/includes/v_nav.php'; ?>

Expected result is to display the customer navigation in the sidebar. I use this in Akita with no issue. I do think I am using a different slider in Akita however. I need to use the standard slider in Jump Start so that entire image is a link.

http://nccbuild2.wooshdata.com is the URL. The slider is there in the source code, it just isnt diplaying. I am using a basic and simple jQuery accordian script to achieve my desired results.

$(function() {
	$( "#ncc2_nav" ).accordion({
		collapsible: true,
		active: false
	});
});

Would this be affecting the display of the slider? Also in the v_nav.php I am using the Google jQuery libraries.

Topic

[Jason Bobich]

Hello,

It looks like you’ve removed this from your page currently, but in theory from looking at what you’re poining, I’d guess that this would break your javascript. — I’m seeing two things here. (1) I’m not an expert on jQuery, but It looks you’re sort of combining the two separate kinds of declarations. (2) The second things is that when you’re working with WordPress, in an environment where you could theoretically be incorporating themes and plugins doing who knows what, it’s really important to write your jQuery not simply using the $ character.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

So, I think with the snippet you’re using, you’re meaning to do the following. This would execute your code after the DOM is ready in a non-conflicting way.

jQuery(document).ready(function($) {
	$( "#ncc2_nav" ).accordion({
			collapsible: true,
			active: false
		});
	});
});

Or if you want your code to execute right away (but generally not what you want to do):

(function($) {
	$( "#ncc2_nav" ).accordion({
		collapsible: true,
		active: false
	});
})(jQuery);

[Charlie Harper]

Thank you so much for leading me down the right path. Especially since the problem wasn’t actually related to the framework. I hope this correspondence helps others in the future.

I added the below to my functions.php file in my child theme.

function accordion_head_load(){

	//register the custom script
	wp_enqueue_script('ncc2_nav', 'http://nccbuild2.wooshdata.com/wp-content/themes/nccomicon-2/includes/ncc.nav.js', array('jquery','jquery-ui-core','jquery-ui-accordion'), '1.8.3');

}
add_action('template_redirect', 'accordion_head_load');

The below is the js script based on what you told me to use from the WordPress docs. Sorry, RTFM failure on my part. 😛

jQuery(document).ready(function($) {
	$( "#ncc2_nav" ).accordion({
			collapsible: true,
			active: false
		});
	});

I left just the HTML and CSS in the PHP file. Using the Enhanced Text widget plugin I included the PHP file in the left sidebar.

Thank you so much for the support and great framework to build on.

• This reply was modified 8 years, 2 months ago by Charlie Harper.
• This reply was modified 8 years, 2 months ago by Jason Bobich.

[Author]

Replies