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

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

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

実装例（サンプル）

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

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

1から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-2' ) . hrzAccordion( {
        openOnLoad: '1',
        containerClass: 'jquery-hrzAccordion-2-container',
        contentContainerClass: "jquery-hrzAccordion-2-contentContainer",
        contentWrapper: "jquery-hrzAccordion-2-contentWrapper",
        contentInnerWrapper: "jquery-hrzAccordion-2-contentInnerWrapper",
        handleClass: "jquery-hrzAccordion-2-handle",
        handleClassOver: "jquery-hrzAccordion-2-handleOver",
        handleClassSelected: "jquery-hrzAccordion-2-handleSelected",
    } );
} );
// -->
</script>

CSS

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

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

<style>
<!--
.jquery-hrzAccordion-2-container {
    width: 100%;
}
#jquery-hrzAccordion-2 {
    display: none;
}
#jquery-hrzAccordion-2 ul {
    list-style-type: none;
    margin: 0;
    padding:0; 
}
#jquery-hrzAccordion-2 li{
    display: inline;
    margin: 0px;
    padding:0px;
}
.jquery-hrzAccordion-2-handle {
    float: left;
    width: 32px;
    height: 310px;
    margin: 1px;
    margin-right: -10px;
    background:  url(http://alphasis.info/library/javascript/jquery/plugin/hrzAccordion/images/blade_grey.png) no-repeat;
    text-align:center;
    padding-top:10px;
    font-weight: bold;
    color: #9e9e9e;
    font-size: 16px;
}
.jquery-hrzAccordion-2-handleOver {
    background: url(http://alphasis.info/library/javascript/jquery/plugin/hrzAccordion/images/blade_grey_sel.png) no-repeat;
}
.jquery-hrzAccordion-2-handleSelected {
    background: url(http://alphasis.info/library/javascript/jquery/plugin/hrzAccordion/images/blade_grey_sel.png) no-repeat;
}
.jquery-hrzAccordion-2-contentContainer {
    padding-left: 0px; 
    float: left;
    width:0px;
    height: 310px; 
    overflow:hidden;
}
.jquery-hrzAccordion-2-contentWrapper{ 
}
.jquery-hrzAccordion-2-contentInnerWrapper{
    text-align: justify;
    padding: 10px;
}
-->
</style>

HTML

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

スポンサード リンク

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