【jQuery】jQuery Masonry

質問

この度jQueryで壁にぶつかり、質問させて頂きます。

現在開発中のWEBサービスにて、jQuery Masonryとアコーディオン機能を組み合わせたページを構築する流れとなっております。

画面イメージとしては・・
Pinterestにアコーディオン機能が付いており、各帯をクリックする毎に内容が表示される機能です。
【Point】横幅は制限がありますが、縦幅には制限が無く、アコーディオンが開閉する毎にグリッド部分の再構築（ムーブアクション）を行いたいのですが、それが上手くいきません。

参考サイト：http://goo.gl/QLQI7

実際のソース（抜粋）：
<script>
jQuery(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
jQuery('#container').masonry({
itemSelector: '.item',
isAnimated:true
});
});
});
</script>

<script>
jQuery(function () {
jQuery("dd").css("display","none");
jQuery("dl dt").click(function(){
var cont = jQuery(this).next();
if(jQuery(cont).css("display")=="none"){
jQuery("dd").slideUp("slow");
jQuery(cont).slideDown("fast");
jQuery("dt").removeClass("select");
jQuery(this).addClass("select");
}
}).hover(
function(){jQuery(this).addClass("over");}
),(
function(){jQuery(this).removeClass("over");}
);
});
</script>

<div id="container">
～ここから～
<div class="item">
<dl>
<dt>タイトル1</dt>
<dd>本文1</dd>
<dt>タイトル2</dt>
<dd>本文2</dd>
<dt>タイトル3</dt>
<dd>本文3</dd>
</dl>
</div>
</div>
～ここまでがLoopで複数のデータが表示される～

なお、jQuery初心者でして具体的な構文までをサポート頂けますと幸いです。
よろしくお願い致します。

回答No.1

danyvis · ベストアンサー

テストしてないので、なんとも言えませんが、
こんな感じでしょうか？

<script>
jQuery(function () {
jQuery("dd").css("display","none");

jQuery("dl dt").click(function(){

var cont = jQuery(this).next();

if(jQuery(cont).css("display")=="none"){
jQuery("dd").slideUp("slow", function(){
jQuery('#container').masonry("reload");
});
jQuery(cont).slideDown("fast");
jQuery("dt").removeClass("select");
jQuery(this).addClass("select");
}

}).hover(
function(){jQuery(this).addClass("over");}
),(
function(){jQuery(this).removeClass("over");}
);
});
</script>