【jQuery】要素の高さを揃えるプラグインが効かなくなる現象

実務ではテキスト量の増減によって要素の高さが変動する箇所に対して、高さを揃える為に「jquery.tile.js」をよく使います。
昔ながらのfloatによる横並びのコンテンツだと高さを揃えておかないとカラム落ちが発生することもあるからです。
しかし、ある案件でアコーディオン内のコンテンツに対してjquery.tile.jsが効かなくなる現象が発生しました。原因はページ読み込み時に対象のコンテンツがアコーディオン内などdisplay:none;があたっている状態によるものと判明しました。
この問題の解決方法は簡単であり、scriptの記述を少し工夫することで解決することができました。

回避方法

下記のように.onの中へtileのスクリプトを記述することで対応することができました。

$(function(){
    $("#hoge-block").on("click", function() {
    $(this).next("#hoge-list").slideToggle();
    $(this).toggleClass("open");
    $("#hoge-content").tile();
    });
});

参考にさせていただいたページ
https://teratail.com/questions/15087

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。