I've broken my collapsible div and I can't figure out why

JavaScript
1

Hi there everyone!

I’ve been altering an ecommerce template to better suit us and I’ve managed to break one of the elements that I really like about the page.

I moved a collapsible div that allows the user to enter a copuon from the top of the page to the bottom, since it made more sense to have it by the order total. The problem is that moving the code from the top to the bottom broke the collapsing element of the div. Now it’s just expanded by default and can’t be retracted even by clicking the link.

Here’s the working version (click on the coupon link at the top): https://wheeltastic.com/checkout1.html

Here’s the non-working example with the link at the bottom of the page: https://wheeltastic.com/checkout2.html

Can I ask what would have caused it to quit operating properly?

Thanks for your time!

2

Try validating your html. When you moved the coupon form you placed it inside the order form and nested forms are not valid. That might be causing your problem. Try moving it below the closing tag of the order form and see if it works then.

3

As webmachine the nested form is causing problems.

If you change the nested form to a div then the code works.

<div id="coupon-collapse-wrap" class="checkout_coupon collapse">
  <p class="form-row form-row-first">
    <input type="text" value="" id="coupon_code" placeholder="Coupon code" class="input-text" name="coupon_code">
  </p>
  <p class="form-row form-row-last">
    <input type="submit" value="Apply Coupon" name="apply_coupon" class="button">
  </p>
  <div class="clear"></div>
</div>

Of course you would then need to check which button had submitted the form and act accordingly. If you want it separate then it needs to be outside of the other form and in a form of its own as before.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.