<?php require APPROOT . '/app/views/components/header.php'; ?>

<!-- Frequently asked question section -->
<section class="faq-section">
  <div class="faq-search">
    <h3>FAQs</h3>
    <input type="text" placeholder="Search FAQs...">
  </div>

  <div class="mb-10 faq">
  <input type="radio" name="tabs" id="tab-none" class="input-tabs" style="display: none;" checked>

    
    <!-- FAQ Item 1 -->
    <div class="wrap-1">
      <input type="radio" class="input-tabs" id="tab-1" name="tabs">
      <label for="tab-1">
        <div>Tab One</div>
        <div class="cross"></div>
      </label>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quasi inventore
        unde nobis voluptatibus illum quae rerum laudantium minima, excepturi quis maiores. 
        Eaque quae, nam delectus explicabo, deserunt ipsum!
      </div>
    </div>

    <!-- FAQ Item 2 -->
    <div class="wrap-2">
      <input type="radio" class="input-tabs" id="tab-2" name="tabs">
      <label for="tab-2">
        <div>Tab Two</div>
        <div class="cross"></div>
      </label>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        <span class="tip" data-tip="Eaque quae, nam delectus explicabo, deserunt ipsum!">explicabo</span>, 
        deserunt ipsum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        <span class="tip" data-tip="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">Mollitia</span> autem quasi inventore.
      </div>
    </div>

    <!-- FAQ Group with Sub-Questions -->
    <div class="wrap-3">
      <input type="radio" class="input-tabs" id="tab-3" name="tabs">
      <label for="tab-3">
        <div>Tab Three</div>
        <div class="cross"></div>
      </label>

      <!-- This section needs special handling for nested toggles -->
      <div class="questions">
        <!-- Sub Question 1 -->
        <div class="question-wrap">
          <input type="radio" class="input-tabs" id="question-1" name="question">
          <label for="question-1">
            <div>Question One</div>
            <div class="cross"></div>
          </label>
          <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam atque, soluta doloribus distinctio saepe
            labore voluptates facere illum alias perferendis praesentium quia vel accusamus incidunt corporis veniam sapiente.
          </div>
        </div>

        <!-- Sub Question 2 -->
        <div class="question-wrap">
          <input type="radio" class="input-tabs" id="question-2" name="question">
          <label for="question-2">
            <div>Question Two</div>
            <div class="cross"></div>
          </label>
          <div class="content">
            Ipsam atque, soluta doloribus distinctio saepe labore voluptates facere illum alias perferendis
            praesentium quia vel accusamus incidunt corporis veniam sapiente. Voluptate, quasi.
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

<?php require APPROOT . '/app/views/components/footer.php'; ?>
