jqueryを利用したアコーディオンのサンプル
<!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>
<script>
jQuery(function($) {
$(".switch").on("click", function(){ //.switchがクリックされたら
$(this).next().slideToggle("fast").toggleClass("on"); // クリックした.switchの次の要素にさらっと(fast)した速さで.onを付与
$(this).toggleClass("on"); // クリックした.switchに.onを付与
});
});
</script>
<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>
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;
}