Q&A を商品ページに…と対応していたけれども、内容の追加のたびに、HTMLで作るのがとても大変…!!!
と思ったので、どのテーマでもそのままコピペでSection追加できるものを見つけたのでメモ!!
<div class="qa">
<dav> <h1>{{ section.settings.heading }}</h1></dav>
<div class="qa-list mts">
{% for block in section.blocks %}
<dl>
<dt>{{ block.settings.question }}</dt>
<dd>
<p>{{ block.settings.answer }}</p>
</dd>
</dl>
{% endfor %}
</div>
</div>
<style>
.qa h1 {
padding: 28px 80px 0px 30px;
}
.qa-list dl {
position: relative;
margin: 0;
padding: 28px 80px 28px 30px;
cursor: pointer;
border-bottom: 1px solid #000;
background-color: #ededed;
}
.qa-list dl:first-child {
border-top: 1px solid #000;
}
.qa-list dl::before {
position: absolute;
top: 35px;
right: 35px;
display: block;
width: 7px;
height: 7px;
margin: auto;
content: '';
transform: rotate(135deg);
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.qa-list .open::before {
transform: rotate(-45deg);
}
.qa-list dl dt {
position: relative;
margin: 0;
padding: 0 0 0 50px;
font-weight: bold;
font-size: 20px;
}
.qa-list dl dt::before {
font-size: 22px;
line-height: 1;
position: absolute;
top: 3px;
left: 0;
display: block;
content: 'Q.';
color: #f20000;
}
.qa-list dl dd::before {
font-size: 22px;
line-height: 1;
position: absolute;
top: 3px;
left: 2px;
display: block;
content: 'A.';
font-weight: bold;
color: #3285bf;
}
.qa-list dl dd {
position: relative;
display: none;
height: auto;
margin: 20px 0 0;
padding: 0 0 0 50px;
}
.qa-list dl dd p {
margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
margin-top: 0;
}
@media screen and (max-width: 767px) {
.qa-list dl {
position: relative;
padding: 15px 40px 15px 10px;
}
.qa-list dl::before {
top: 20px;
right: 20px;
width: 7px;
height: 7px;
}
.qa-list dl dt {
padding: 0 0 0 30px;
font-size: 14px;
}
.qa-list dl dt::before {
font-size: 14px;
top: 3px;
left: 5px;
content: 'Q.';
}
.qa-list dl dd::before {
font-size: 14px;
top: 5px;
left: 5px;
content: 'A.';
}
.qa-list dl dd {
margin: 10px 0 0;
padding: 0 0 0 30px;
font-size: 14px;
}
.qa-list dl dd p {
margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
margin-top: 0;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
$(".qa-list dd").hide();
$(".qa-list dl").on("click", function(e){
$('dd',this).slideToggle('fast');
if($(this).hasClass('open')){
$(this).removeClass('open');
}else{
$(this).addClass('open');
}
});
});
</script>
{% schema %}
{
"name": "Q&A",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Q&A",
"label": "Q&A"
}
],
"blocks": [
{
"type": "question",
"name": "質問",
"settings": [
{
"type": "text",
"id": "question",
"label": "質問",
"default": "Do you have a question?"
},
{
"type": "richtext",
"id": "answer",
"label": "答え"
}
]
}
],
"presets": [
{ "name": "FAQ" }
]
}
{% endschema %}