Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • Last Modified:

Wordpress JQuery Conflict

I have a JQuey function that when you click a button it shows a hidden div.  I'm using word press.  

I have the Div inside of a function.  When I have the div within the HTML it opens and closes fine.  BUT now with the div inside of a function, it will not open

JQuery Function:
$(document).ready(function() {
$(':button[name^="custom_"]').click(function() {
			$(this).val("Finish Customizing");
			var x = $(this).attr("name").replace(/\D/g,"");
			x = x?"-"+x:"";
			$("#custom-hidden-1").toggle('slow');
	});});

Open in new window



PHP Function:
function checkout_fields() {

?>
<div id="custom-color-1">
<p id="company-wrap">
<span class="edd-description"><?php _e( 'Enter the name of your company.', 'pippin_edd' ); ?></span>
<input class="edd-input" type="text" name="edd_company" id="edd-company" placeholder="<?php _e('Company Name', 'pippin_edd'); ?>" value=""/>
</p>
</div>
<?php					
}

Open in new window

0
rgranlund
Asked:
rgranlund
1 Solution
 
GaryCommented:
WP uses jQuery to reference the library so you have to use jQuery and not $ - but you can pass the jQuery object into the function as $ by changing your code like so...

jQuery(document).ready(function($) {
$(':button[name^="custom_"]').click(function() {
			$(this).val("Finish Customizing");
			var x = $(this).attr("name").replace(/\D/g,"");
			x = x?"-"+x:"";
			$("#custom-hidden-1").toggle('slow');
	});});

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now