Woocommerce Cart Show/Hide Coupon Functionality

Question

Apologies for what is probably a fairly simple question, but I really hate javascript I've hit a wall here.

Basically, I've been modifying the Woocommerce cart page into something more palatable, and I want to move the coupon section into the Basket Totals area so that it appears below the Subtotal and above the Shipping. I've got it in position easily enough, but I want it to only appear when it's clicked on, like this for mobile:

The problem is I want it to be triggered whenever anywhere on the row is clicked, but setting the actual TD to activate it doesn't work and causes the error you can see in the image console. On mobile this is the TD, on desktop it would be the TH, just to make things more complicated, as you can see from this screenshot and the following layout code:

<tr class="cart-subtotal">
        <th ><?php esc_html_e( 'Coupon', 'woocommerce' ); ?></th>
        <td data-title="<?php esc_attr_e( 'Coupon', 'woocommerce' ); ?>"><span class="accordion add-coupon">+</span>
            <!--<button class="accordion"></button>-->
            <div class="panel">
                <div class="coupon">
                <!--<label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label>-->
                <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> 
                <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>">
                    <?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>
                </button>
                <?php do_action( 'woocommerce_cart_coupon' ); ?>
            </div>
            </div>
        </td>
    </tr>

I've been using some Javascript to slide the panel up and down when it's isolated divs and buttons controlling it, but for the life of me I can't get it to play nicely using any part of the table as a trigger and I don't want to break the layout of the table by trying to work around it when it feels like I should be able to make this work. Here's the Javascript:

<script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
    });
    }
    </script>

So basically, clicking on an element with the class "accordion" should cause an element with the class "panel" to open or close.

I've been fighting with this all day and I just can't get it to play nicely no matter what I try, so I'd really appreciate anyone's insights into how I can make this slide down when the whole row is clicked so the coupon function is only there if needed.

Many thanks.

UPDATE

Based on @vincenzo-di-gaetano's answer below I've got closer. With the following setup I have made the entire row (so everything between the faint grey border lines) clickable and they will make the form disappear, but once it's gone it won't come back at present.

<tr class="subtotal-coupon">
        <th ><?php esc_html_e( 'Coupon', 'woocommerce' ); ?></th>
        <td data-title="<?php esc_attr_e( 'Coupon', 'woocommerce' ); ?>"><span class="add-coupon">+</span>
                <div class="coupon">
                <label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label>
                <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> 
                <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>">
                    <?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>
                </button>
                <?php do_action( 'woocommerce_cart_coupon' ); ?>
            </div>
        </td>
    </tr>

Slightly modified jQuery:

add_action( 'wp_footer', 'show_hide_coupon_form' );
function show_hide_coupon_form() {
    ?>
    <script type="text/javascript">
        jQuery(function($){
            $('.cart_totals .subtotal-coupon td').click(function(){
                $('.cart_totals div.coupon').toggle();
                $(this).text( $(this).text() == '+' ? '-' : '+' );
            });
        });
    </script>
    <?php
}

What I don't understand is why it won't toggle and only disappear.

Answer 1

In case the HTML code is the following:

<tr class="subtotal-coupon">
    <th ><?php esc_html_e( 'Coupon', 'woocommerce' ); ?></th>
    <td data-title="<?php esc_attr_e( 'Coupon', 'woocommerce' ); ?>"><span class="add-coupon">+</span>
        <div class="coupon">
            <label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label>
            <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> 
            <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
            <?php do_action( 'woocommerce_cart_coupon' ); ?>
        </div>
    </td>
</tr>

And this is the CSS code to hide the coupon form by default:

.cart_totals .subtotal-coupon .coupon {
    display:none;
}

You can use the following jQuery script to show/hide the coupon form based on the click of the .cart_totals.subtotal-coupon td element:

add_action( 'wp_footer', 'show_hide_coupon_form' );
function show_hide_coupon_form() {
    ?>
    <script type="text/javascript">
        jQuery(function($){
            $('.cart_totals .subtotal-coupon td').click(function(){
                $('.cart_totals .subtotal-coupon .coupon').toggle();
                $('.cart_totals .subtotal-coupon .add-coupon').text( $(this).text() == '+' ? '-' : '+' );
            });
        });
    </script>
    <?php
}

The code has been tested and works. Add it to your active theme's functions.php.