jQuery Form Crashes when Radio Button is Clicked

Question

I have this form that uses jQuery. It works great except for one thing: When a user clicks the radio button called "Isuzu NPR-HD-Gas," the page's layout disappears! This happens in every browser. All of the other options in the form work great, it's just this one radio button that causes the problem. What can be causing this problem?

Here's the link: http://www.unitedtruckcenters.com/custompage.asp?pg=compare-to-isuzu

Note: Please scroll down and click on "Isuzu NPR-HD-Gas" to see what I am talking about.

Answer 1

On Line 175 and 176 of main.js:

$('td:nth-child(' + show + '),th:nth-child(' + show + ')').show();
$('td:nth-child(' + hide + '),th:nth-child(' + hide + ')').hide();

It looks like you are trying to swap out a column here, but your selectors aren't quite right. In particular, it looks like when you se the nth-child value to "2", you end up selecting another, larger td element. Which is why, after you call hide(), your layout breaks.

Try changing your selector to better specify what you want to show or hide. For example:

$('#advantage-calculator td:nth-child(' + show + ')').show();
$('#advantage-calculator td:nth-child(' + hide + ')').hide();

(I'm not sure why you were selecting th's in the first place so I took those out)