title: Accordion with php form
body: <p>Sorry now if this is a dumb question. But it's recking my head the past few days.</p>
  
  <p>I'm making a webfront for a admin of a school that can easily input data into a database.
  All my inputs are working. I just trying to make it easier for the user now.
  So what my question is: Can I use an accordion / collapsible form using JQuery. Here what I've got at the moment</p>
  
  <p>For explanation the code below is in the "form.php" file</p>
  
  <pre><code>    &lt;?php
  
  require_once 'inc/header.inc.php';
  ?&gt;
      &lt;form action=""  id="" method="POST"&gt;      
          &lt;fieldset&gt;
  
          &lt;legend&gt;Please Complete the Details&lt;/legend&gt;
           &lt;div class =""&gt;
             &lt;label for="FName" class=""&gt;Child's First Name&lt;/label&gt;
             &lt;div class=""&gt;
              &lt;input type="text" name="FName" id="FName"  maxlength="9" class="form-control" required title="Please type the child's first name here"&gt;
             &lt;/div&gt;
           &lt;/div&gt;
  
          &lt;!-- ///////////////////////////////////////////////////////////////////////////////////// --&gt;
  
  
          &lt;legend&gt;Please Complete the parent's details&lt;/legend&gt;
           &lt;div class =""&gt;
             &lt;label for="FName" class=""&gt;Parents First Name&lt;/label&gt;
             &lt;div class=""&gt;
              &lt;input type="text" name="PFName" id="PFName"  maxlength="9" class="form-control" required title="Please type the parent's first name here"&gt;
             &lt;/div&gt;
           &lt;/div&gt;
  
          &lt;!-- /////////////////////////////////////////////////////////////////////// --&gt;
  
          &lt;legend&gt;Please Complete the parent's details&lt;/legend&gt;
          &lt;div class =""&gt;
             &lt;label for="extraNo" class=""&gt;Extra Number, Optional&lt;/label&gt;
             &lt;div class=""&gt;
              &lt;input type="text" name="extraNo" id="extraNo"  maxlength="15" class="form-control" required title="Please enter extra number here"&gt;
             &lt;/div&gt;
           &lt;/div&gt;
              &lt;div class = ""&gt;
              &lt;div class="input"&gt;
             &lt;input type="submit" class="btn btn-primary"value="Insert Record" name = "Submit"&gt;
           &lt;/div&gt;
           &lt;/div&gt;
          &lt;/fieldset&gt;
          &lt;/form&gt;
  
      &lt;?php
  }
  require_once 'inc/footer.inc.php';
  ?&gt;
  </code></pre>
  
  <p>My styling and scripts are in my header.inc.php and footer.inc.php files. </p>
  
  <p>What I'm looking to do is to have an accordion on each of the  tags so that when the user in navigating through the form it wont be just a big block of text. </p>
  
  <p>So I'm just wondering. Do I put my code for the accordion into my header / footer files do to I put it into my form.php</p>
  
  <p>Any replies or other suggestions would be great. P.S I'm not using Bootstrap.</p>
  
  <p>Thanks.</p>