HTMLだけでできるアコーディオンメニュー
「details」「summary」「p」タグを利用しアコーディオンメニューを作成しています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: stretch;
flex-direction: column;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
padding: 3rem;
}
details {
margin-bottom: 0.5rem;
outline: 1px solid #ccc;
border-radius: 3px;
transition: .5s;
height: 30px;
}
summary {
cursor: pointer;
padding: 0.5rem;
background-color: #efefef;
}
details p {
padding: 1rem 0.5rem;
background-color: #fff;
}
details[open] {
height: 100px;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container" height="100%">
<details>
<summary>アコーディオンメニュー</summary>
<p>テキスト内容がここに入ります</p>
</details>
<details>
<summary>アコーディオンメニュー</summary>
<p>テキスト内容がここに入ります</p>
</details>
<details>
<summary>アコーディオンメニュー</summary>
<p>テキスト内容がここに入ります</p>
</details>
</div>
</body></html>
開閉アイコンを丸枠で囲んだCSSアコーディオンメニュー
「border-radius」で開閉アイコンを丸枠で囲んでます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
padding: 1rem;
}
.accordion {
padding: 1rem;
}
.accordion-item {
margin-bottom: 0.5rem;
}
.accordion-check {
display: none;
}
.accordion-label {
position: relative;
display: block;
cursor: pointer;
padding: 0.5rem 0.5rem 0.5rem 2rem;
background-color: #f94f4f;
color: #fff;
font-size: 1rem;
line-height: 1.5;
}
.accordion-label::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5px;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #efefef;
color: #333;
text-align: center;
line-height: 18px;
content: '+';
}
.accordion-box {
height: 0;
overflow: hidden;
opacity: 0;
background-color: #efefef;
transition: all .5s;
}
.accordion-check:checked~.accordion-box {
height: auto;
opacity: 1;
padding: 1rem;
}
.accordion-check:checked+.accordion-label:before {
content: '-';
}
.accordion-box p {
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container" height="100%">
<div class="accordion">
<div class="accordion-item">
<input class="accordion-check" id="accordion-1" checked="" type="checkbox">
<label class="accordion-label" for="accordion-1">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容がここに入ります。テキスト内容がここに入ります。テキスト内容がここに入ります。</p>
</div>
</div>
<div class="accordion-item">
<input class="accordion-check" id="accordion-2" type="checkbox">
<label class="accordion-label" for="accordion-2">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。</p>
</div>
</div>
<div class="accordion-item">
<input class="accordion-check" id="accordion-3" type="checkbox">
<label class="accordion-label" for="accordion-3">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。</p>
</div>
</div>
</div>
</div>
</body></html>
閉じるアイコンを「✗」にしたCSSアコーディオンメニュー
rotate(45deg)を指定し「＋」→「✗」にしてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://pa-tu.work/css/prism/prism.css"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fafafa;
padding: 1rem;
}
.accordion {
padding: 1rem;
}
.accordion-item {
margin-bottom: 0.5rem;
}
.accordion-check {
display: none;
}
.accordion-label {
position: relative;
display: block;
cursor: pointer;
padding: 0.5rem;
background-color: #efefef;
color: #333;
font-size: 1rem;
line-height: 1.5;
}
.accordion-label::after {
position: absolute;
top: 50%;
right: 0px;
height: 100%;
width: 40px;
transform: translateY(-50%) rotate(0deg);
color: #333;
text-align: center;
font-size: 1.5rem;
content: '+';
}
.accordion-box {
height: 0;
overflow: hidden;
opacity: 0;
background-color: #fff;
transition: all .5s;
}
.accordion-check:checked~.accordion-box {
height: auto;
opacity: 1;
padding: 1rem;
}
.accordion-check:checked+.accordion-label:after {
transform: translateY(-50%) rotate(45deg);
}
.accordion-box p {
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container" height="100%">
<div class="accordion">
<div class="accordion-item">
<input class="accordion-check" id="accordion-1" checked="" type="checkbox">
<label class="accordion-label" for="accordion-1">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容がここに入ります。テキスト内容がここに入ります。テキスト内容がここに入ります。</p>
</div>
</div>
<div class="accordion-item">
<input class="accordion-check" id="accordion-2" type="checkbox">
<label class="accordion-label" for="accordion-2">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。</p>
</div>
</div>
<div class="accordion-item">
<input class="accordion-check" id="accordion-3" type="checkbox">
<label class="accordion-label" for="accordion-3">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。</p>
</div>
</div>
</div>
</div>
</body></html>
上下にラインを入れたCSSアコーディオンメニュー
上下にラインを入れたアコーディオンメニューです
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://pa-tu.work/css/prism/prism.css"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fafafa;
padding: 1rem;
}
.accordion {
padding: 1rem;
}
.accordion-item {
margin-bottom: 0.5rem;
}
.accordion-check {
display: none;
}
.accordion-label {
position: relative;
display: block;
cursor: pointer;
padding: 0.5rem;
border-top: 1px solid #e860ce;
border-bottom: 1px solid #e860ce;
background-color: #efefef;
color: #333;
font-size: 1rem;
line-height: 1.5;
}
.accordion-label::after {
position: absolute;
top: 50%;
right: 0px;
height: 100%;
width: 40px;
transform: translateY(-50%);
color: #e860ce;
text-align: center;
font-size: 1.5rem;
content: '+';
}
.accordion-box {
height: 0;
overflow: hidden;
opacity: 0;
background-color: #fff;
transition: all .5s;
}
.accordion-check:checked~.accordion-box {
height: auto;
opacity: 1;
padding: 1rem;
}
.accordion-check:checked+.accordion-label:after {
content: '-';
}
.accordion-box p {
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container" height="100%">
<div class="accordion">
<div class="accordion-item">
<input class="accordion-check" id="accordion-1" checked="" type="checkbox">
<label class="accordion-label" for="accordion-1">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容がここに入ります。テキスト内容がここに入ります。テキスト内容がここに入ります。</p>
</div>
</div>
<div class="accordion-item">
<input class="accordion-check" id="accordion-2" type="checkbox">
<label class="accordion-label" for="accordion-2">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。</p>
</div>
</div>
<div class="accordion-item">
<input class="accordion-check" id="accordion-3" type="checkbox">
<label class="accordion-label" for="accordion-3">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。</p>
</div>
</div>
</div>
</div>
</body></html>
右側に開閉アイコンを入れたCSSアコーディオンメニュー
左にライン、右にアイコンを入れたアコーディオンメニューです
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://pa-tu.work/css/prism/prism.css"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fafafa;
padding: 1rem;
}
.accordion {
padding: 1rem;
}
.accordion-item {
margin-bottom: 0.5rem;
}
.accordion-check {
display: none;
}
.accordion-label {
position: relative;
display: block;
cursor: pointer;
padding: 0.5rem;
border-left: 10px solid #46aadc;
background-color: #efefef;
color: #333;
font-size: 1rem;
line-height: 1.5;
}
.accordion-label::after {
position: absolute;
top: 50%;
right: 0px;
height: 100%;
width: 40px;
transform: translateY(-50%);
color: #46aadc;
text-align: center;
font-size: 1.5rem;
content: '+';
}
.accordion-box {
height: 0;
overflow: hidden;
opacity: 0;
background-color: #fff;
transition: all .5s;
}
.accordion-check:checked~.accordion-box {
height: auto;
opacity: 1;
padding: 1rem;
}
.accordion-check:checked+.accordion-label:after {
content: '-';
}
.accordion-box p {
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container" height="100%">
<div class="accordion">
<div class="accordion-item">
<input class="accordion-check" id="accordion-1" checked="" type="checkbox">
<label class="accordion-label" for="accordion-1">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容がここに入ります。テキスト内容がここに入ります。テキスト内容がここに入ります。</p>
</div>
</div>
<div class="accordion-item">
<input class="accordion-check" id="accordion-2" type="checkbox">
<label class="accordion-label" for="accordion-2">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。</p>
</div>
</div>
<div class="accordion-item">
<input class="accordion-check" id="accordion-3" type="checkbox">
<label class="accordion-label" for="accordion-3">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。</p>
</div>
</div>
</div>
</div>
</body></html>
シンプルなCSSアコーディオンメニュー
チェックボックスを使用しCSSのみでアコーディオンメニューを作成しました。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://pa-tu.work/css/prism/prism.css"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fafafa;
padding: 1rem;
}
.accordion {
padding: 1rem;
}
.accordion-item {
margin-bottom: 0.5rem;
}
.accordion-check {
display: none;
}
.accordion-label {
position: relative;
display: block;
cursor: pointer;
padding: 0.5rem;
border-left: 40px solid #333;
background-color: #efefef;
color: #333;
font-size: 1rem;
line-height: 1.5;
}
.accordion-label::before {
position: absolute;
top: 50%;
left: -40px;
height: 100%;
width: 40px;
transform: translateY(-50%);
color: #fff;
text-align: center;
font-size: 1.5rem;
content: '+';
}
.accordion-box {
height: 0;
overflow: hidden;
opacity: 0;
background-color: #fff;
transition: all .5s;
}
.accordion-check:checked~.accordion-box {
height: auto;
opacity: 1;
padding: 1rem;
}
.accordion-check:checked+.accordion-label:before {
content: '-';
}
.accordion-box p {
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container" height="100%">
<div class="accordion">
<div class="accordion-item">
<input class="accordion-check" id="accordion-1" checked="" type="checkbox">
<label class="accordion-label" for="accordion-1">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容がここに入ります。テキスト内容がここに入ります。テキスト内容がここに入ります。</p>
</div>
</div>
<div class="accordion-item">
<input class="accordion-check" id="accordion-2" type="checkbox">
<label class="accordion-label" for="accordion-2">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。</p>
</div>
</div>
<div class="accordion-item">
<input class="accordion-check" id="accordion-3" type="checkbox">
<label class="accordion-label" for="accordion-3">アコーディオンメニュー</label>
<div class="accordion-box">
<p>テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。テキスト内容を入力します。</p>
</div>
</div>
</div>
</div>
</body></html>