Class in WooCommerce to show/hide with Jquery

2 Views

I’ve been trying to modify WooCommerce, to show a gift checkbox. And so far, it is showing it, but it isn’t hidin /showing it when I click the checkbox.

The code I’ve been using on functions.php is:

Read More
/**
* Add the field to the checkout
**/
add_action( 'woocommerce_after_order_notes','wordimpress_custom_checkout_field' );

function wordimpress_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_checkout_field"><h3>' . __( 'Is this a gift?' ) . '</h3><p style="margin: 0 0 8px;">Please check below to indicate if this is a gift</p>';

    woocommerce_form_field( 'gift_checkbox', array(
        'type'  => 'checkbox',
        'class' => array( 'gift-checkbox form-row-wide' ),
        'label' => __( 'Yes' ),
    ), $checkout->get_value( 'gift_checkbox' ) );

    woocommerce_form_field( 'to_textbox', array(
        'type'  => 'text',
        'class' => array( 'to-text form-row-wide' ),
        'label' => __( 'To' ),
    ), $checkout->get_value( 'to_textbox' ) );

    woocommerce_form_field( 'from_textbox', array(
        'type'  => 'text',
        'class' => array( 'from-text form-row-wide' ),
        'label' => __( 'From' ),
    ), $checkout->get_value( 'from_textbox' ) );

    woocommerce_form_field( 'message_textbox', array(
        'type'  => 'text',
        'class' => array( 'message-text form-row-wide' ),
        'label' => __( 'Message' ),
    ), $checkout->get_value( 'message_text' ) );

    echo '</div>';
}

Now I try to hide it in css witht: 

.to-text{ display:none; }
.from-text{ display:none; }
.message-text{ display:none; }

And my jQuery code that I’m using in script.js is: 

$( ".gift-checkbox " ).click(function() {
    $( ".to-text form-row-wide" ).slideToggle();
    $( ".from-text form-row-wide" ).slideToggle();
    $( ".message-text form-row-wide" ).slideToggle();
});

What am I doing wrong?

I don’t understand why isn’t working.

Post Views: 2

Related posts

2 comments

  1. Your selectors are incorrect.

    $( ".to-text form-row-wide" ).slideToggle();
$( ".from-text form-row-wide" ).slideToggle();
$( ".message-text form-row-wide" ).slideToggle();

    should be 

    $( ".to-text" ).slideToggle();
$( ".from-text" ).slideToggle();
$( ".message-text" ).slideToggle();

    Also, you should change the classes to ids unless there could be multiples.

  2. 1). .slideToggle(); function doesn’t work with display:none; css.

    Instead use visibility:hidden; css or use the hide(); function at initialization in your JS script.

    2). In wordpress you need to use jQuery instead of the $ shorthand as this:
    (with the corrected code by @bob0the0mighty)

    jQuery(document).ready(function(){

    jQuery( ".to-text" ).slideToggle();
    jQuery( ".from-text" ).slideToggle();
    jQuery( ".message-text" ).slideToggle();

});

    And the CSS:

    .to-text, .from-text, .message-text{ 
    visibility:hidden;
}

    3). If you want to use the $ shorthand you will need to include this in your JS script:

    var $ = jQuery.noConflict();
$(document).ready(function(){   

    //your code goes here

});

    So it will be…

    JS Script:

    var $ = jQuery.noConflict();
$(document).ready(function(){

    $( ".to-text" ).slideToggle();
    $( ".from-text" ).slideToggle();
    $( ".message-text" ).slideToggle();

});

    CSS:

    .to-text, .from-text, .message-text{ 
    visibility:hidden;
}

    4) If you want to use the css display:none;, you better have to use also .addClass() , .hasClass(), .removeClass(), .toggleClass() and .css() functions in addition in your JS script.

Comments are closed.