参考サイト
https://junpei-sugiyama.com/accordion/

[html]

<div class=”accordion”>
<div class=”accordion-container”>
<!– 1 –>
<div class=”accordion-item”>
<h3 class=”accordion-title js-accordion-title”>
アコーディオンタイトル1
</h3>
<div class=”accordion-content”>
<p>コンテンツが入ります。</p>
</div>
</div>
<!– 2 –>
<div class=”accordion-item”>
<h3 class=”accordion-title js-accordion-title”>
アコーディオンタイトル2
</h3>
<div class=”accordion-content”>
<p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p>
</div>
</div>
<!– 3 –>
<div class=”accordion-item”>
<h3 class=”accordion-title js-accordion-title”>
アコーディオンタイトル3
</h3>
<div class=”accordion-content”>
<p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p>
</div>
</div>
<!– 4 –>
<div class=”accordion-item”>
<h3 class=”accordion-title js-accordion-title”>
アコーディオンタイトル4
</h3>
<div class=”accordion-content”>
<p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p>
</div>
</div>
</div><!– /.accordion-container –>
</div><!– /.accordion –>

[css]

.accordion-item{
margin-bottom: 40px;
background-color: #fcf3f0;
border-radius: .6em;
}

.accordion {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
position: relative;
width: 100%;
}
.accordion-title {
cursor: pointer;
font-weight: 600;
padding: 30px 80px 30px 100px;
margin-bottom: 0;
font-size: 1.6rem;
}

.accordion-title::before{
display: block;
content: “Q”;
font-family: ‘Archivo’, sans-serif;
background: #f78216;
color: #fff;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
font-size: 2.0rem;
position: absolute;
top:27px;
left: 40px;
}
.accordion-content {
display: none;
padding: 15px 80px 40px 100px;
}

.accordion-content p::before{
display: block;
content: “A”;
font-family: ‘Archivo’, sans-serif;
background: #003f7e;
color: #fff;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
font-size: 2.0rem;
position: absolute;
top: 0px;
left: -60px;
}
.accordion-content p {
position: relative;
margin-bottom: 0;
font-size: 1.3rem;
}

/* 矢印 */
.accordion-title {
position: relative;
}
.accordion-title::after {
border-right: solid 4px #f78216;
border-top: solid 4px #f78216;
content: “”;
display: block;
height: 16px;
position: absolute;
right: 40px;
top: 38%;
transform: rotate(135deg);
transition: transform .3s ease-in-out, top .3s ease-in-out;
width: 16px;
}
.accordion-title.open::after {
top: 45%;
transform: rotate(-45deg);
}

[js]

<script>
$(function () {
// タイトルをクリックすると
$(“.js-accordion-title”).on(“click”, function () {
// クリックした次の要素を開閉
$(this).next().slideToggle(300);
// タイトルにopenクラスを付け外しして矢印の向きを変更
$(this).toggleClass(“open”, 300);
});
});
</script>