［jQuery］横方向のアコーディオンメニュー

横方向に動くアコーディオンもjQueryでできます。
今回はプラグインを使用しない方法です。

【HTML】

<dl class="accordion">
<dt>1</dt>
<dd><div>コンテント</div></dd>
<dt>2</dt>
<dd><div>コンテント</div></dd>
<dt>3</dt>
<dd><div>コンテント</div></dd>
<dt>4</dt>
<dd><div>コンテント</div></dd>
<dt>5</dt>
<dd><div>コンテント</div></dd>
</dl>

【CSS】

.accordion {
    width: 600px;
    height: 300px;
    margin: 50px auto;
    overflow: hidden;
}
.accordion dt {
    float: left;
    width: 20px;
    height: 300px;
    background: #9fb7d4;
    cursor: pointer;
    padding: 10px;
    border-right: 1px solid #fff;
}
.accordion dd {
    float: left;
    width: 374px;
    height: 300px;
    display: none;
    background: #ddd;
    border-right: 1px solid #fff;
}
.accordion dd div {
    width: 374px;
    height: 300px;
    overflow: hidden;
    display: block;
}

※jQueryのスクリプトを書き始める前に、HTMLとCSSの文法チェックをしましょう。

見た目もチェックしましょう。

CSSのリセットをしておくことがポイントです（このアコーディオンは特に）。
リセットをしないでいたら、レイアウトがこんなことに↓
（なにこの隙間は。）

JavaScriptやjQueryのスクリプトを書き終えてチェックをすると、こんなエラーでも、スクリプトの間違いだと勘違いしかねません。
なので、その都度チェックするほうが圧倒的に効率的です。

【スクリプト】

１．jQuery本体を読み込み（またはGoogleのAPIへリンク）

２．$(function() {
    $('.accordion dd').eq(0).show();
    $('.accordion dt').click(function() {
        $('.accordion dd').animate({width:'hide'},700);
        $(this).next().animate({width:'toggle'}, 700);
    });
});

クリックした時に他のメニューが微妙に動くのが難点です。

プラグインも色々あるので、次回使ってみたいと思います。