Blog

1. Create template page.faq.json

{
  "sections": {
    "main": {
      "type": "main-page-faq"
    }
  },
  "order": ["main"]
} 

2. Create section main-page-faq.liquid

<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'faq-style.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<div class="page-width page-width--narrow">
  <h1 class="main-page-title page-title h0">
    {{ page.title | escape }}
  </h1>
  <div class="rte">
    {{ page.content }}
  </div>
  <div class="faq-container">
    <div class="tabs">
    	{% for block in section.blocks %}
      		{% assign item = block.settings %}
      		<div class="tab">
      			<input type="checkbox" id="faq_checkbox_{{ forloop.index }}" class="faq-checkbox">
        		<label for="faq_checkbox_{{ forloop.index }}" class="tab-label button button--primary">{{ item.question }}</label>
        		<div class="tab-content">{{ item.answer }}</div>
      		</div>
      	{% endfor %}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "FAQ Page",
  "tag": "section",
  "class": "spaced-section",
	"blocks": [
		{
			"name": "FAQ Item",
			"type": "faq",
			"settings": [
				{
					"type": "text",
					"id": "question",
					"label": "Question",
					"default": "Do you have a question?"
				},
				{
					"type": "richtext",
					"id": "answer",
					"label": "Answer",
					"default": "<p>I have an answer</p>"
				}
			]
		}
	]
}
{% endschema %} 

3. Create faq-style.css in Assets folder

.faq-checkbox {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tabs {
  border-radius: 10px;
  overflow: hidden;
}
.tab {
  width: 100%;
  color: white;
  overflow: hidden;
}
.tab-label {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1em;
  font-weight: bold;
  color: white;
}
.tab-label:after {
  content: "+";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all 0.5s;
}
.tab-content {
  max-height: 0;
  padding: 0 1em;
  background-color: white;
  transition: all 0.5s;
  color: black;
}
.tab-content p {
  margin: 0;
}
.faq-checkbox:checked + .tab-label:after {
  content: "-";
}
.faq-checkbox:checked ~ .tab-content {
  max-height: 100vh;
  padding: 1em;
} 

Hire Me

Try Shopify free for 14 days

Start free trial