jQuery：アコーディオンパネル：縦スライド - Webデザインのこと、いろいろ

01　アコーディオンパネルその１の１
slideDown　slideUp　を使う
f:id:sankoblog:20160410203742p:plain
ブログ0607_アニメーション効果：完成版にリンク

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0607_アニメーション効果</title>
<!--表示・非表示をスライドで切り換える
       $( セレクタ ).slideDown( スピード, コールバック関数 );
      $( セレクタ ).slideUp( スピード, コールバック関数 );-->
<script src="js/jquery-2.2.1.min.js"></script>
<style>
dt {
	background: #7CADB6;
	width: 364px;
	padding: 10px 10px 10px 30px;
	cursor: pointer;
	font-weight: bold;
	color: #FFF;
}
dd {
	border: 2px solid #7CADB6;
	height: 80px;
	width: 340px;
	padding: 15px 30px;
	margin: 0;
	line-height: 1.5em;
	background: #FFF;
}
dd{
	border-top: none;
}
</style>
<script>
$(document).ready(function(){
		$('dt').on('click',function(){
			if($('dd').css('display')          ==  'block'){
				//ddが見えていたら　これを書いたらcss/dd display: none;を削除
				$('dd:not(:animated)').slideUp('slow');
				  //開いているんだから、とじるよ。
			} else {
				$('dd').slideDown('600');
			}
		});
	});
</script>
</head>

<body>
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</body>
</html>

02　アコーディオンパネルその１の２
slideToggle　を使う
f:id:sankoblog:20160410203749p:plain
ブログ0607_アニメーション効果：完成版にリンク

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0607_アニメーション効果</title>
<!--表示・非表示をスライドで交互に切り換える
       slideToggle()
      $( セレクタ ).slideToggle( スピード, コールバック関数 );-->
<script src="js/jquery-2.2.1.min.js"></script>
<style>
dt {
	background: #7CADB6;
	width: 364px;
	padding: 10px 10px 10px 30px;
	cursor: pointer;
	font-weight: bold;
	letter-spacing: 3px;
	color: #FFF;
}
dd {
	border: 2px solid #7CADB6;
	height: 80px;
	width: 340px;
	padding: 15px 30px;
	margin: 0;
	line-height: 1.5em;
	background: #FFF;
	display: none;  /*大事大事大事！*/
}
dd{
	border-top: none;
}
</style>

<script>
$(document).ready(function(){  //ページが開いたら
		$('dt').on('click',function(){
			$('dd').slideToggle(600);
		});
	});
</script>
</head>

<body>
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</body>
</html>

03　アコーディオンパネルその３　複数パネル
f:id:sankoblog:20160410203811p:plain
教科書p13～アコーディオンパネル：完成版にリンク

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>教科書p13～　アコーディオンパネル</title>
<script src="js/jquery-2.2.1.min.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}
dl {
	width: 400px;
	margin: 50px auto;
}
dl dt {
	background: #7CADB6;
	border-bottom: 1px solid #FFF;
	padding: 10px 10px 10px 20px;
	font-weight: bold;
	color: #FFF;

	cursor: pointer;
}
dl dd {
	width: 358px;
	padding: 20px;
	border: 1px solid #7CADB6;
	border-top: none;
	height: 100px;
}
p { line-height: 1.5; }

</style>
<script>
$(document).ready(function(){
	$('dd:not(:first)').css('display','none');  //一行目が開いていたら
	$('dt').on('click',function(){
		if($('+dd',this).css('display')=='none'){
			//  みている人はどのdtを押すかわからない
			$('dd:visible').slideUp(500);  //見えているddを隠す
			$('+dd',this).slideDown(500);
		}
	});

	});
</script>
</head>

<body>
<div id="container">
<dl>
<dt>おはよう</dt>
<dd id="first">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>こんにちは</dt>
<dd id="second">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>こんばんは</dt>
<dd id="third">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
</div><!--#container-->
</body>
</html>

04　アコーディオンパネルその３　cssだけで作成
f:id:sankoblog:20160410203721p:plain
垂直タイプのアコーディオン式メニュー：完成版にリンク

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>垂直タイプのアコーディオン式メニュー</title>
<link href="css/style.css" rel="stylesheet">
<style>
/*reset*/
* {
  margin:0;
  padding:0;
}

/*menu*/
.accordion {
  width: 400px;
  height: 300px;
  margin-left:10px; /*ブラウザ上の左の空き*/
}
.accordion li {
  color: #555;
  background: #fff;
  margin-bottom:5px;
  height:20%;
  overflow: hidden;
	-webkit-transition:all 0.4s ease-in;
	transition: 0.4s all ease-in;
	-moz-transition:all 0.4s ease-in;
	-o-transition:all 0.4s ease-in;
}
.accordion li:hover {
  height:70%;
}
.accordion li h2 {
  color: #333;
  margin-bottom: 10px;
  padding: 5px;
  background: #eee;
  border: 1px solid #ccc;	
}
.accordion li:hover h2 {
  color: #fff;
  background:#81AF86;
  border: 1px solid #ccc;
}
.accordion li div {
  padding-top:12px;
}
</style>
</head>

<body>
<ul class="accordion">
<li>
<div>
<h2>特長1</h2>
<p>特長1の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長2</h2>
<p>特長2の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長3</h2>
<p>特長3の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長4</h2>
<p>特長4の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長5</h2>
<p>特長5の詳細</p>
</div>
</li>
</ul>
</body>
</html>