[jQuery]tbodyに.slideToggle()を付与する方法

ちょっとしたこと。

失敗例
styleをいじる
デザインの注意

失敗例

こんなのがあったとして。

<table>
    <thead><tr><th colspan="2">*******</th></tr></thead>
    <tbody>
        <tr><th>***</th><td>****</td></tr>
        <tr><th>***</th><td>****</td></tr>
        <tr><th>***</th><td>****</td></tr>
        <tr><th>***</th><td>****</td></tr>
        <tr><th>***</th><td>****</td></tr>
    </tbody>
</table>

あんまりないケースだけど、例えば「theadをクリックしたらtbodyが表示される」を作りたいとする。.show()だとびっくりしちゃうから、視覚的に違和感がないように.slideDown()を仕込みたい。だからjs（jQuery）をこんな感じで組む。

$(function(){
    $('table thead').click(function(){
        $('table tbody').slideToggle();
    })
})

表示・非表示はすれど、スライドしない。ダメじゃんどうすんだよ、という話。

styleをいじる

そもそものtbodyの性質がスライド周りに適してないのでその辺りを調整する必要がある。

<table>
    <thead><tr><th colspan="2">*******</th></tr></thead>
    <tbody style="display: none;">
        <tr><th>***</th><td>****</td></tr>
        <tr><th>***</th><td>****</td></tr>
        <tr><th>***</th><td>****</td></tr>
        <tr><th>***</th><td>****</td></tr>
        <tr><th>***</th><td>****</td></tr>
    </tbody>
</table>

table tbody{
  display: block;
}

これでOK。

jQueryのスライドはdisplay:block;でないとちゃんと動かない場合がある。だからそうしてしまおうという内容。cssでblockにしておいて、初期状態で非表示にしたい場合はhtml上での指定が優先されるのでここで非表示。

HTMLタグに直接書くのが嫌だって気持ちは、今回のケースでは尊重できない。

cssで全て賄おうと以下の感じで作ってもダメだったりする。

table > *{
    display: block;
}
table tbody{
    display: none;
}

代案としてjQueryで指定する事はできるけど、読み込み時に一瞬表示されるので格好が悪い。だからこの書き方を守るのが無難。

という話。

デザインの注意

table周りのスタイルが崩壊する。大まかなところでは幅の指定が必要で、0から組み上げることになる。一番楽なのはflexによる指定。