show/hide div with simple jQuery script

Question

show/hide div with simple jQuery script

sven.v

2016年2月2日 16:04

I want to show/hide contents by using radio buttons on a WordPress page. When a user clicks on the radio button with label "red", the corresponding div with the class "red" needs to show up.

Here's the (working) example I'm trying to integrate: http://www.tutorialrepublic.com/codelab.php?topic=faqfile=jquery-show-hide-div-using-radio-button

In WordPress, I've placed this in the custom CSS of my theme:

.box
 {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
 }

.red { background: #ff0000; }
.green { background: #00ff00; }
.blue { background: #0000ff; }

I've placed this in an external script (script-pricing.js). That file was copied to the child-theme folder:

$(document).ready(function(){
$('input[type="radio"]').click(function(){
    if($(this).attr("value")=="red"){
        $(".box").not(".red").hide();
        $(".red").show();
    }
    if($(this).attr("value")=="green"){
        $(".box").not(".green").hide();
        $(".green").show();
    }
    if($(this).attr("value")=="blue"){
        $(".box").not(".blue").hide();
        $(".blue").show();
    }
});

I've enqueued that script with this code in functions.php:

//add a custom jQuery script to Wordpress 
function add_pricing() {
wp_register_script('pricing',
get_stylesheet_directory_uri() . '/script-pricing.js', 
array('jquery'),
'1.0' );
wp_enqueue_script('pricing');
}
add_action('wp_enqueue_scripts', 'add_pricing');

I've placed this in a WordPress page:

divlabelinput name="colorRadio" type="radio" value="red" / One- year/label
labelinput name="colorRadio" type="radio" value="green" / Two-year/label
labelinput name="colorRadio" type="radio" value="blue" / Three-year/label/div

div class="red box"You have selected red/div
div class="green box"You have selected green/div
div class="blue box"You have selected blue/div

The page displays the three radio buttons. The CSS hides the three 'You have selected" lines. But when a radio button is clicked the respective line isn't showing up.

What have I missed and what needs to be improved? Thanks in advance for your response!

Topic radio buttons jquery css Wordpress

Category Web

Jerry.S · Accepted Answer · 2016年2月2日 16:04

I could be wrong but imho is it better to use the 'full' $handle (string) (Required) Name of the script in your case: script-pricing instead of pricing.

/**
 * Register/Enqueue my script into footer for better page load
 * Read more: {@link http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-radio-button}
 * @version  1.0
 * @since WordPress 4.4.1
 */
function wpse216359_add_pricing() {
    wp_register_script('script-pricing',  get_stylesheet_directory_uri() . '/script-pricing.js', array('jquery'), '1.0', true ); 
    wp_enqueue_script ('script-pricing'), get_stylesheet_directory_uri() . '/script-pricing.js', array('jquery'), '1.0', true );
}
add_action('wp_enqueue_scripts', 'wpse216359_add_pricing');

For more information please take a look at the codex The true at the end ($in_footer): if this parameter is true the script is placed at the bottom of the <body>.
This requires the theme to have the wp_footer() hook in the appropriate place.

Linnea Huxford · Accepted Answer · 2016年2月1日 22:44

Most likely, the cause of your problem is that jQuery is in compatibility mode. This means that you can't use the '$' shortcode.

To get your Javascript code to work, replace all '$' with 'jQuery'

Or, wrap your code in an anonymous function, like this:

jQuery(document).ready(function( $ ) {

   // Put your jQuery code here.  

});

See: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

show/hide div with simple jQuery script

About