jQuery の Horizontal Accordian を使った水平型アコーディオン①

投稿日: 2011年8月12日 作成者: alphasis

jQuery の Horizontal Accordian プラグインを使って作った水平型アコーディオン①。

実装例（サンプル）

  • コンテンツ1
  • コンテンツ2
  • コンテンツ3
  • コンテンツ4
  • コンテンツ5

実装例（サンプル）について

5つ並んだ弓状で縦長の画像をクリックすると、それぞれの内容をスライド・アニメーション動作しながら開く。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

「jquery.hrzAccordion.js」ファイルは、「 jQuery_Horizontal_Accordion_Plugin_2_00_alpha.zip 」に含まれている。入手方法については、こちら。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="hrzAccordion/jquery.hrzAccordion.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-hrzAccordion' ) . hrzAccordion( {
        openOnLoad: '1',
        containerClass: 'jquery-hrzAccordion-container',
        contentContainerClass: 'jquery-hrzAccordion-contentContainer',
        contentWrapper: 'jquery-hrzAccordion-contentWrapper',
        contentInnerWrapper: 'jquery-hrzAccordion-contentInnerWrapper',
        handleClass: 'jquery-hrzAccordion-handle',
        handleClassOver: 'jquery-hrzAccordion-handleOver',
        handleClassSelected: 'jquery-hrzAccordion-handleSelected',
    } );
} );
// -->
</script>

CSS

画像へのパスは、それぞれ、アップロードした場所を指定する。

画像ファイルも、「 jQuery_Horizontal_Accordion_Plugin_2_00_alpha.zip 」に含まれている。

<style>
<!--
.jquery-hrzAccordion-container {
    width: 100%;
}
#jquery-hrzAccordion {
    display: none;
}
#jquery-hrzAccordion ul {
    list-style-type: none;
    margin: 0;
    padding:0; 
}
#jquery-hrzAccordion li{
    display: inline;
    margin: 0px;
    padding:0px;
}
.jquery-hrzAccordion-handle {
    float: left;
    width: 38px;
    height: 310px;
    margin: 1px;
    margin-right: -10px;
    background:  url(./hrzAccordion/images/blade.png) no-repeat;
}
.jquery-hrzAccordion-handleOver {
    background: url(./hrzAccordion/images/blade_sel.png) no-repeat;
}
.jquery-hrzAccordion-handleSelected {
    background: url(./hrzAccordion/images/blade_sel.png) no-repeat;
}
.jquery-hrzAccordion-contentContainer {
    padding-left: 0px; 
    float: left;
    width:0px;
    height: 310px; 
    overflow:hidden;
}
.jquery-hrzAccordion-contentWrapper {
}
.jquery-hrzAccordion-contentInnerWrapper {
    text-align: justify;
    padding: 10px;
}
-->
</style>

HTML

<ul id="jquery-hrzAccordion">
    <li><div class="jquery-hrzAccordion-handle"></div>コンテンツ1</li>
    <li><div class="jquery-hrzAccordion-handle"></div>コンテンツ2</li>
    <li><div class="jquery-hrzAccordion-handle"></div>コンテンツ3</li>
    <li><div class="jquery-hrzAccordion-handle"></div>コンテンツ4</li>
    <li><div class="jquery-hrzAccordion-handle"></div>コンテンツ5</li>
</ul>

スポンサード リンク

カテゴリー: Horizontal Accordion, JavaScript, jQuery, アニメーション, パネル, プラグイン パーマリンク