I have a script that toggles the visibility of a div, inside of the div is content loaded with the masonry plugin. The issue I'm having is that the masonry div (and as a result the two wrapper divs) doesn't expand in height as the masonry content is loaded - it squishes the masonry items together.
here's my code:
<html>
<head>
<title>view?</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<style type="text/css">
#step_wrapper{
width:960px;
margin:0px auto;
/*float:left;*/
}
.step_num{
float:left;
width:50px;
background-color:#0099ff;
}
.step{
float:left;
width:910px;
background-color:#ff0000;
padding-bottom:20px;
margin-bottom:20px;
}
.step h2{
padding:0px;
margin:0px;
}
.media{
background-color:#59A20E;
width:100%;
text-align:center;
cursor:hand;
float:left;
}
#content-step-1{
}
.content{
float:left;
min-width:785px;
margin-left:40px;
background-color:#0066ff;
padding-left:15px;
display:none;
}
.item {
width: 165px;
float: left;
padding:5px;
background-color:#FF0;
margin-top:10px;
}
</style>
<script>
$(function(){
<!-- masonry plugin -->
var $container = $('#content-step-1');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 165
});
});
$($container).masonry({
// options
itemSelector : '.item',
columnWidth : 165,
gutterWidth : 35
});
<!-- masonry plugin -->
<!-- needs to be auto generated -->
$("#step-1").click(function () {
$("#content-step-1").toggle("fast");
});
<!-- needs to be auto generated -->
});
</script>
</head>
<body>
<div id="step_wrapper">
<div class="step_num">1)</div>
<div class="step">
<h2>STEP ONE SON</h2>
<p>Description here bro</p>
<div id="step-1" class="media">expand</div>
<div id="content-step-1" class="content">
<div class="item">asjdlajskdla</div>
<div class="item"><img src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" width='165' /></div>
<div class="item">baksdkjasdasdsdadasdasda</div>
<div class="item">asjdlajskdla</div>
<div class="item">baksdkjjsdksd</div>
<div class="item">baksdkjasdasdsdadasdasda</div>
<div class="item">asjdlajskdla</div>
<div class="item">baksdkjjsdksd</div>
</div>
</div>
</div>
</body>
</html>
any help would be greatly appreciated, thank you!
