JavaScript + Ajax 実践サンプル集 - jQueryのhorizontalAccordionプラグインを利用した水平型アコーディオン (Part2)

jQueryのhorizontalAccordionプラグインを利用した水平型アコーディオン (Part2)　《プログラマーがネットで副収入を得る方法とは》

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

このサンプルは、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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Horizontal Accordion </title>
  <link href="jQuery/horizontalAccordion/css/main.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/horizontalAccordion/ifx.js" type="text/javascript"></script>
  <script src="jQuery/horizontalAccordion/easing.js" type="text/javascript"></script>
  <script src="jQuery/horizontalAccordion/jquery.hrzAccordion.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $("#hrzAccordion").hrzAccordion({ containerClass: "hrzContainer3",
        listItemClass: "listItem3",
        contentStartClass: "contentStart3",
        contentEndClass: "contentEnd3",
        contentWrapper: "contentWrapper3",
        contentInnerWrapper: "contentInnerWrapper3",
        handleClass: "handle3",
        handleClassOver: "handleOver3",
        handleClassSelected: "handleSelected3",
        customHandleClass: "custom"
      });
    });    
  </script>
</head>
<body>
  
  <br />
  <br />
    
  <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>
    <li>
      <div class="handle3">
        <img src='jQuery/horizontalAccordion/images/com_02.gif'></div>
      <h3>
        Content 2</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>
    <li>
      <div class="handle3">
        <img src='jQuery/horizontalAccordion/images/com_03.gif'></div>
      <h3>
        Content 3</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>
    <li>
      <div class="handle3">
        <img src='jQuery/horizontalAccordion/images/com_04.gif'></div>
      <h3>
        Content 4</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>
    <li>
      <div class="handle3">
        <img src='jQuery/horizontalAccordion/images/com_05.gif'></div>
      <h3>
        Content 5</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>
  
  <br />
  <br />
  
</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/*Main Container*/
.hrzContainer {
	width:100%;
}
.hrzContainer ul{
	list-style-type: none;
	margin: 0px;
	padding:0px;	
}
.hrzContainer li{
	display: inline; 
	margin: 0px;
	padding:0px;
}
/*Handle*/
.handle {
	float: left;
	width: 38px;
	height: 310px;
	margin: 1px;
	margin-right: -10px;
	background:  url(../images/blade.png) no-repeat;
}
.handleOver{	
	background: url(../images/blade_sel.png) no-repeat;
}
.handleSelected{
	
	background: url(../images/blade_sel.png) no-repeat;
}
/*Content Container*/
.contentWrapper{

	
	width: 640px;
}
.contentInnerWrapper{
	text-align: justify;
	padding: 10px;
	
}
.contentWrapper h3{
	border-bottom: 1px solid silver;
	color: rgb(172, 194, 112);
}
/*Animation Start*/
.contentStart {
	padding-left: 0px;	
	float: left;
	width:0px;
	height: 310px;	
	overflow:hidden;
}
/*Animation End*/
.contentEnd {
	padding-left: 24px;
	float: left;	
	width:660px;
	height: 310px;
}

/*Main Container*/
.hrzContainer3 {
	width:100%;
}
.hrzContainer3 ul{
	list-style-type: none;
	margin: 0px;
	padding:0px;	
}
.hrzContainer3 li{
	display: inline; 
	margin: 0px;
	padding:0px;
}
/*Handle*/
.handle3 {
	float: left;
	width: 64px;
	height: 314px;
	text-align:center;

	background: #666;
	border: 1px solid white;
}
.handle3 img{
	margin-top:2px;
	filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
}
.handleOver3{
	
	background: red;
	border: 1px solid white;
}
.handleOver3 img{
	margin-top:2px;
	filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70;
}
.handleSelected3{
	
	background: #000;
	border: 1px solid white;
}
/*Content Container*/
.contentWrapper3{
	text-align: justify;
	
}
.contentInnerWrapper3{
	padding: 10px;
}
.contentWrapper3 h3{
	border-bottom: 1px solid silver;
	color: #1E90FF;
}
/*Animation Start*/
.contentStart3 {
	padding-left: 0px;	
	float: left;
	width:0px;
	height: 310px;	
	overflow:hidden;
}
/*Animation End*/
.contentEnd3 {
	
	float: left;	
	
	height: 310px;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/horizontalAccordion/css/main.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/horizontalAccordion/ifx.js" type="text/javascript"></script>
  <script src="jQuery/horizontalAccordion/easing.js" type="text/javascript"></script>
  <script src="jQuery/horizontalAccordion/jquery.hrzAccordion.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $("#hrzAccordion").hrzAccordion({ containerClass: "hrzContainer3",
        listItemClass: "listItem3",
        contentStartClass: "contentStart3",
        contentEndClass: "contentEnd3",
        contentWrapper: "contentWrapper3",
        contentInnerWrapper: "contentInnerWrapper3",
        handleClass: "handle3",
        handleClassOver: "handleOver3",
        handleClassSelected: "handleSelected3",
        customHandleClass: "custom"
      });
    });    
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  
  <br />
  <br />
    
  <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>
    <li>
      <div class="handle3">
        <img src='jQuery/horizontalAccordion/images/com_02.gif'></div>
      <h3>
        Content 2</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>
    <li>
      <div class="handle3">
        <img src='jQuery/horizontalAccordion/images/com_03.gif'></div>
      <h3>
        Content 3</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>
    <li>
      <div class="handle3">
        <img src='jQuery/horizontalAccordion/images/com_04.gif'></div>
      <h3>
        Content 4</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>
    <li>
      <div class="handle3">
        <img src='jQuery/horizontalAccordion/images/com_05.gif'></div>
      <h3>
        Content 5</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>
  
  <br />
  <br />

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのhorizontalAccordionプラグインを利用した水平型アコーディオン (Part2)　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのhorizontalAccordionプラグインを利用した水平型アコーディオン (Part2) 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのhorizontalAccordionプラグインを利用した水平型アコーディオン (Part2)　《プログラマーがネットで副収入を得る方法とは》