improve custrom FAQ block

_includes/block-faq-1.html

@@ -3,7 +3,10 @@
     <div class="columns">
       <div class="column">
         {% for faq_item in section.faq_items %}
-        <li class="faq-item">{{ faq_item.answer }}</li>
+        <button class="collapsible">{{ faq_item.question }}</button>
+          <div class="content faq-item">
+            <p>{{ faq_item.answer }}</p>
+          </div>
         {% endfor %}
       </div>        
     </div>

index.md

@@ -42,11 +42,11 @@ page_sections:
 - template: faqs
   block: faq-1
   faq_items:
-  - question: "/"
+  - question: How do I
     answer: Home
-  - question: "/"
+  - question: Can you
     answer: Hello
-  - question: "/"
+  - question: Why is the PIN only 5 digits long? 
     answer: World
 - template: content-feature
   block: feature-1