how to have more than 1 container using jquery masonry - jquery-masonry

Question

I have a tabs set up on my website and I would like to use Masonry on the content of each tab, but I can only get it working on 1 tab at a time.
Initially I tried just using the generic selector and using that in each tab. This however just worked in the first tab. I then tried adding more container variables:
<!--Masonry kit-->
<script type="text/javascript" src="http://localhost/LazyDuck/masonry-site/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).load(function() {
var $container = $('#container');
var $container = $('#dining');
var $container = $('#events');
var $container = $('#climbing');
var $container = $('#wildlife');
var $container = $('#shopping');
var $container = $('#kids');
var $container = $('#sport');
$container.masonry({
itemSelector: '.item',
gutterWidth : 10,
isAnimated: !Modernizr.csstransitions
});
});});
But that doesn't work either. I'm sure this is a simple thing but my JavaScript coding isn't so great. I guessed the above. :(

Answer 1

I think it is more of jQUery syntax but also i think masonry wont work if there is no visible content. It has to be applied to a div that is visible.
So one way would be to do it all while its visible and then hide it.. Not great.. I know.
var $container = $('#container');
var $container = $('#dining');
var $container = $('#events');
var $container = $('#climbing');
var $container = $('#wildlife');
To solve the chainablilty of starting the plugin just do this
$('#wildlife, #climbing , ... ,#container).masonry({ ..
But in this case it would be easier to toggle it by a uniqe class name such as
class="MasoniseThis otherClasses"
...
$('.MasoniseThis').masonry({ ..
And on each pageload it should apply the plugin to any visible divs with that Class on it.
Without some markupor example in JSFiddle we cannot really help you any more.