megane9988
8/4/2014 - 12:54 PM

jqueryを利用したアコーディオンのサンプル

jqueryを利用したアコーディオンのサンプル

accordiontotal.html
content_copyfile_download
<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>アコーディオンのサンプル</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<style>
		body{
			width: 400px;
			margin: 0 auto;
		}
		.off{
			display: none;
		}
		.on{
			display: block;
		}
		.switch{
			background-color: #ccc;
			margin: 0;
			padding: 10px;
			cursor: pointer;
		}
		.switch:hover,
		.switch.on{
			background-color: #444;
			color: #FFF;
		}
		ul.off{
			margin: 0;
			padding: 0;
		}
		ul.off li{
			list-style: none;
		}
		ul.off li a{
			display: block;
			text-decoration: none;
			padding: 10px;
			border-bottom: 1px solid #ccc;
		}
		ul.off li a:hover{
			background-color: #f6f6f6;
		}
	</style>
</head>
<body>
	<p href="#" class="switch">展開用のスイッチ</p>
		<ul class="off">
			<li><a href="#">折りたたまれた要素</a></li>
			<li><a href="#">折りたたまれた要素</a></li>
			<li><a href="#">折りたたまれた要素</a></li>
			<li><a href="#">折りたたまれた要素</a></li>
			<li><a href="#">折りたたまれた要素</a></li>
		</ul>
	<p href="#" class="switch">展開用のスイッチ</p>
		<ul class="off">
			<li><a href="#">折りたたまれた要素</a></li>
			<li><a href="#">折りたたまれた要素</a></li>
			<li><a href="#">折りたたまれた要素</a></li>
			<li><a href="#">折りたたまれた要素</a></li>
			<li><a href="#">折りたたまれた要素</a></li>
		</ul>
<script>
	jQuery(function($) {
		$(".switch").on("click", function(){ //.switchがクリックされたら
			$(this).next().slideToggle("fast").toggleClass("on"); // クリックした.switchの次の要素にさらっと（fast）した速さで.onを付与
			$(this).toggleClass("on"); // クリックした.switchに.onを付与
		});
	});
</script>
</body>
</html>
accordion.js
content_copyfile_download
<script>
  jQuery(function($) {
    $(".switch").on("click", function(){ //.switchがクリックされたら
      $(this).next().slideToggle("fast").toggleClass("on"); // クリックした.switchの次の要素にさらっと（fast）した速さで.onを付与
      $(this).toggleClass("on"); // クリックした.switchに.onを付与
    });
  });
</script>
accordion.html
content_copyfile_download
<p href="#" class="switch">展開用のスイッチ</p>
	<ul class="off">
		<li><a href="#">折りたたまれた要素</a></li>
		<li><a href="#">折りたたまれた要素</a></li>
		<li><a href="#">折りたたまれた要素</a></li>
		<li><a href="#">折りたたまれた要素</a></li>
		<li><a href="#">折りたたまれた要素</a></li>
	</ul>
<p href="#" class="switch">展開用のスイッチ</p>
	<ul class="off">
		<li><a href="#">折りたたまれた要素</a></li>
		<li><a href="#">折りたたまれた要素</a></li>
		<li><a href="#">折りたたまれた要素</a></li>
		<li><a href="#">折りたたまれた要素</a></li>
		<li><a href="#">折りたたまれた要素</a></li>
	</ul>
accordion.css
content_copyfile_download
body{
	width: 400px;
	margin: 0 auto;
}
.off{
	display: none;
}
.on{
	display: block;
}
.switch{
	background-color: #ccc;
	margin: 0;
	padding: 10px;
	cursor: pointer;
}
.switch:hover,
.switch.on{
	background-color: #444;
	color: #FFF;
}
ul.off{
	margin: 0;
	padding: 0;
}
ul.off li{
	list-style: none;
}
ul.off li a{
	display: block;
	text-decoration: none;
	padding: 10px;
	border-bottom: 1px solid #ccc;
}
ul.off li a:hover{
	background-color: #f6f6f6;
}