Adding 'The Loop' into tabs – problem with jQuery/CSS3?

Hello,

The site I am working on is like an online book catalogue. I currently have tabs and custom loops working on different parts of the site.

The templates are set up to pull the relevant information from custom fields.

What I now want is the ability to filter entries on a page without having to refresh, and what I had in mind was having tabs, each of which would then display a loop for a particular category, in order to achieve this.

I want to show the loop in a custom way that I have operating elsewhere successfully, only this time in tabs – this is where the problem comes in. The tabs will show up as expected, but where I put in the loop code, they simply don’t show anything at all. I’ve tested the tabs with other content and they are working as expected.

Here are the bits of code I am using, which are probably riddled with errors and ugly bits, so please excuse that!

The tabs code: (a stock code, from a site somewhere)

[code moderated per forum rules - please use the pastebin]

The loop, as I want it to display - this includes some CSS3 transitions.

[code moderated per forum rules - please use the pastebin]

These are the different bits of code I have tried to put in the tabs, without success - this is mostly varying where the loop begins/ends - whether this is in the tab etc.

[code moderated per forum rules - please use the pastebin]

and

[code moderated per forum rules - please use the pastebin]

Is it possible that the tabs and CSS3 coding are conflicting?

Any advice or fixes would be hugely appreciated; it's the final hurdle on completing the project!

Thanks