I have a page with thumbnails. Three thumbnails are above a show/hide DIV that uses .fadeToggle() to show more thumbnails underneath. All thumbnails have functions on hover (switch from transparent to opaque, change main image etc.). When the extra thumbs are hidden, the three above the show/hide DIV work ok. When all thumbs are shown, the thumbs beneath the DIV work OK, but the three original thumbs do nothing.

Here is what happened in the generated source that caused the issue:

Original source was:

<div id="testthis" style="display:none;">

<div style="clear:both"></div>

Source when show/hide clicked was:

<div id="testthis" style="">

<div style="clear:both"></div>

Fixed by changing to:

<div id="testthis" style="clear:both; display:none;">

Now when clicked changes to:

<div id="testthis" style="clear: both; display: block; ">

Question: Why did .fadeToggle() change display:none to "" in the first instance, but change to display:block in the second?

The code used to activate the toggle was this:

<div style="clear:both; text-align:right"><a href="#American_Products" onClick="$('#testthis').fadeToggle('slow','linear');$(this).text($(this).text() == 'More images' ? 'Less images' : 'More images');">More images</a></div>