in this example A & B should toggle together, but when you click 'toggle span' button once, then 'toggle div' once and again 'toggle span' you will see, that B object is still visible
Solution
Instead toggle() I created this function and it workout:
<script type='text/javascript'>
function toggleCompanyFields() {
if ($('.companyFields').css('display')=='none')
$('.companyFields').show();
else
$('.companyFields').hide();
}
</script>
This bug was posted on tracker and I hope that jQuery team will fix it soon. Dobiatowski!
Background of the problem
In latest project i have build classical order form with fields divided into two groups:
Very often postal data are the same like payment so like every other page do i made button "Postal same as payment data". I used jQuery toggle() function to toggle unnecessary inputs. But the problem came when I crossed this functionality with "user or company" option which was toggling some of the company related fields.
Whats happen
Company inputs was on payment side and postal side of form. And if "Postal same as payment data" option was selected company inputs in postal side was invisible because its parent object was hidden. In this situation when I changed "user or company" option from company to user and then turned off "Postal same as payment data" option. It should show hidden postal form and hide all company inputs. But it wasn't.
Company inputs on visible payment side was hidden but on postal side they had still display:inline style set.
toggle() function didn't hit objects inside its hidden parents.
In the link below I posted code for testing, which show that .toggle() doesn't work for objects inside hidden parents.
http://jsfiddle.net/kXctQ/