<div class="faq-wrap">
<div class="faq-item">
<div class="question on">
<p>よくある質問の実装はできますか？</p>
</div>
<div class="answer">
<p>はい、可能です。</p>
</div>
</div>
<div class="faq-item">
<div class="question on">
<p>ある程度文字が長くなって2行になっても右側のアイコンと被らないようにできますか？ある程度文字が長くなって2行になっても右側のアイコンと被らないようにできますか？</p>
</div>
<div class="answer">
<p>はい、可能です。padding-rightを指定することでうまくいきます。</p>
</div>
</div>
</div>p {
margin-block-start: 0;
margin-block-end: 0;
}
.faq-item {
box-shadow: 0 0 10px rgba(0,0,0,0.3);
margin-bottom: 20px;
width: 100%;
max-width: 1000px;
}
.question {
padding: 20px;
padding-right: 52px;
position: relative;
font-weight: bold;
font-size: 1.1rem;
}
.question:hover {
cursor: pointer;
}
.question::before {
content: "+";
position: absolute;
right: 16px;
top: 50%;
transform: translate(-50%,-50%) rotate(0deg);
transform-origin: center center;
transition: all 0.2s linear 0s;
font-size: 24px;
font-weight: 400;
}
.question.on::before {
transform: translate(-50%,-50%) rotate(45deg);
transform-origin: center center;
}
.question.on::after {
content: "";
position: absolute;
width: calc(100% - 32px);
height: 1px;
background: #ccc;
bottom: 0;
left: 50%;
transform:translatex(-50%);
}
.answer {
padding: 20px;
}
$('.question').on('click', function(){
$(this).toggleClass('on');
$(this).next('.answer').stop().slideToggle();
});
External CSS
This Pen doesn't use any external CSS resources.