Creating FAQ Page for Tourist Website in Zurb Foundation

In the end of this tutorial, your FAQs page will look like,

Zurb Foundation Framework - Tourist Spot FAQ Page
Step 4.1: Creating Layout

Step 4.1.1: Create a duplicate of the index.html file and name it as faq.html.

Step 4.1.2: Open the faq.html file in a HTML editor and detete everything inside the body tags except header, footer and the attached scripts.

Step 4.1.3: Save the file and open it in your favorite browser, the web page will look like,

Zurb Foundation Framework Example - Tourist Spot Faq Page Layout
Step 4.2: Adding Design Elements

Step 4.2.1: For FAQs, we are going to use the element "Accordion" provided by Foundation 5. Various uses of Accordion is shown in this Link. The Syntax of accordion is

 
 <dl class="accordion" data-accordion>
  <dd class="accordion-navigation">
    <a href="#panel1">Accordion 1</a>
    <div id="panel1" class="content">
      <p>Content of Panel1</p>   
    </div>
  </dd>
  
  <dd class="accordion-navigation">
   <a href="#panel2">Accordion 2</a>
    <div id="panel2" class="content">
      <p>Content of Panel2</p>   
    </div>
  </dd>
</dl>
Step 4.3: Editing Contents

Step 4.3.1: Type the below Section accordion code between headers and footers.

<div class="row">
 <div class="large-12 columns text-center">
   <h2>FREQUENTLY ASKED QUESTIONS</h2>
    <hr>
 </div>
</div>
<dl class="accordion" data-accordion>
 <dd class="accordion-navigation">
    <a href="#panel1">1. Can I pay using Skrill?</a>
    <div id="panel1" class="content">
      <p>Yes we accept Skrill(Moneybooker).</p>   
    </div>
 </dd>
  
 <dd class="accordion-navigation">
   <a href="#panel2">2. Can I cancel my order?</a>
    <div id="panel2" class="content">
      <p>Yes you can cancel your order anytime you want.</p>   
    </div>
 </dd>

 <dd class="accordion-navigation">
    <a href="#panel3">3. What is the refund policy?</a>
    <div id="panel3" class="content">
      <p>You can receive 100% refund anytime for any reason, there are no strings attached.</p>   
    </div>
 </dd>
  
 <dd class="accordion-navigation">
   <a href="#panel4">4. How will I get invoice for cheques?</a>
    <div id="panel4" class="content">
      <p>You can receive invoice either by mail or by e-mail.</p>   
    </div>
 </dd>
</dl>

Step 4.3.2: Save the file and open it in your favorite browser, the web page will look like,

Zurb Foundation Framework - Tourist Spot FAQ Page