jQueryのhorizontalAccordionプラグインを利用した水平型アコーディオン (Part2)

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのhorizontalAccordion()プラグインを利用して水平型のアコーディオンを表示します。マウスで地球儀のイメージをクリックするとコンテンツが開きます。

このサンプルは、jQueryのhorizontalAccordion()プラグインを利用して水平型のアコーディオンを表示します。マウスで地球儀のイメージをクリックするとコンテンツが開きます。 



    $(function() {
      $("#hrzAccordion").hrzAccordion({ containerClass: "hrzContainer3",
        listItemClass: "listItem3",
        contentStartClass: "contentStart3",
        contentEndClass: "contentEnd3",
        contentWrapper: "contentWrapper3",
        contentInnerWrapper: "contentInnerWrapper3",
        handleClass: "handle3",
        handleClassOver: "handleOver3",
        handleClassSelected: "handleSelected3",
        customHandleClass: "custom"
      });
    });   


  <ul id="hrzAccordion">
    <li>
      <div class="handle3">
        <img src='jQuery/horizontalAccordion/images/com_01.gif'></div>
      <h3>
        Content 1</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus
        sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac,
        hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum
        eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse
        nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
        <br>
        Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus
        mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus
        lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend
        lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque,
        gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
    </li>

  </ul>