<h1>アコーディオンメニュー</h1>
<style>
body,ul,li,p{padding:0;margin:0px;}
ul,li{list-style-type: none;}
</style>
<style>
#acc {
margin:10px 0 0;
clear: both;
}
#acc li ul {
display: none;
font-size:16px;
line-height:30px;
}
#acc p{
background-color:#FF6;
cursor:pointer;
padding:5px;
height:30px;
user-select: none;
font-size:16px;
line-height:30px;
border: solid 1px #FFF;
}
#acc .p2{
background-color:#DD4;
}
#acc li{
padding:5px;
margin-left:5px;
display: block;
}
</style>
<script>
$(document).ready(function(){
$(".leftmenu li p.current").parent().children('ul').show();
$(".leftmenu li p.current").addClass('act');
$(".leftmenu li p").click(function() {
if ( $(this).hasClass("act") ){
$(this).parent().children('ul').slideUp();
$(this).removeClass('act');
}else{
$(this).removeClass('act');
$(this).addClass('act');
$(this).parent().children('ul').slideDown();
}
});
$(".leftmenu li").hover(function() {
}, function() {
});
});
</script>
<ul id="acc" class="leftmenu">
<li>
<p>アコーディオンメニュー</p>
<ul>
<li>見出しをクリックすると内容の詳細が表示されます</li>
</ul>
</li>
<li>
<p>使い方</p>
<ul>
<li>クリックすると開いたり、閉じたりします</li>
</ul>
</li>
<li>
<p>入れ子もできます</p>
<ul>
<li>
<p class="p2">その１</p>
<ul>
<li>入れ子のテストです</li>
</ul>
</li>
<li>
<p class="p2">その２</p>
<ul>
<li>入れ子のテスト２です</li>
</ul>
</li>
</ul>
</li>
</ul>