practice

　　　　

<html>

<meta charset="utf-8">

<style>
html{box-sizing:border-box;
overflow-y:scroll;}
h1{text-align:center;
margin:40px 0;
font-size:22px;
color:#007f6f;}
main{text-align:center;
margin-top:-20px;
margin-bottom:4px;}
*{padding:0;
margin:0;}
img{border-style:none;}
audio,video{display:inline-block;}
.ゆっくり{list-style:none;
width:100%;
max-width:900px;
margin:0 auto;}
.ゆっくり li{margin:10px 0;}
.ゆっくり section{border:1px solid #abcdef;border-radius:10px;}
.装飾{position:relative;
cursor:pointer;
font-size:20px;
font-weight:bold;
padding:3% 3% 3% 50px;
transition:all .5s ease;}
.装飾::before,
.装飾::after{position:absolute;
content:'';
width:20px;
height:2px;
background-color:#1e90ff;}
.装飾::before{top:48%;
left:15px;
transform:rotate(0deg);}
.装飾::after{top:48%;
left:15px;
transform:rotate(90deg);}
.装飾.close::before{transform:rotate(45deg);}
.装飾.close::after{transform:rotate(-45deg);}
.範囲{display:none;
background:#f8f8f8;
margin:10px 10px 10px 10px;
padding: 20px 10px 10px 40px;}
</style>

<h1>Olympic Fanfare Chord Analyzed</h1>
<main>
<audio controls>
<source src="Olympic_F.mp3"></audio>
</main>
<ul class="ゆっくり">
<li>
<section>
<h3 class="装飾">C セクション / 30と34小節目のコード・ネームは？</h3>
<div class="範囲">
<p><img src="01_section_C.jpg"width="800"></p>
<p>答えは?</p>
</div>
</section>
</li>
<li>
<section>
<h3 class="装飾">G セクション / 79小節目のコード・ネームは？</h3>
<div class="範囲">
<p><img src="02_section_G.jpg"width="800"></p>
<p>答えは?</p>
</div>
</section>
</li>
<li>
<section>
<h3 class="装飾">G と H セクション / 83,84,86,87.88小節目のコード・ネームは？</h3>
<div class="範囲">
<p><img src="03_section_GH.jpg"width="800"></p>
<p>答えは?</p>
</div>
</section>
</li>
</ul>

<script src="jquery.min.js"></script>

<script>
$(".装飾").on("click",function()
{let 写真=$(this).next(".範囲");
$(写真).slideToggle();
if($(this).hasClass("close"))
{$(this).removeClass("close");}
else{$(this).addClass("close");}});
$(window).on("load",function()
{$(".ゆっくり li:first-of-type section").addClass("close");
$(".open").each(function(index,element)
{let 楽譜=$(element).children(".装飾");
$(楽譜).addClass("close");
let 表示=$(element).children(".範囲");
$(表示).slideDown(800);});});
</script>

</html>