JQuery accordion menu using MySQL queries and PHP

 

I am trying to make an accordion menu using 2 MySQL queries (1 for the header and 1 for the contents) and PHP.  Below is my code PHP and JQuery code, I can't seem to figure out how to make the contents stay inside the headers.  Everything from the MySQL prints out in order.  Any help would be greatly appreciated.

 

PHP and MySQL

 <div id="left">
  <div class="menu">
<?php
  $sqlseasons = "SELECT * FROM seasons";
  $resultseasons = mysqli_query($dbc, $sqlseasons);
  while ($row = mysqli_fetch_array($resultseasons)){  
  $year_id = $row['year_id'];
?>
    <h3><?php echo $row['seasonyear'] ?></h3>
    <?php 
      $sqlteam = "SELECT team.team_id, team.year_id, team.teamname 
                  FROM team 
                  WHERE team.year_id = '$year_id'";
      $resultsteam = mysqli_query($dbc, $sqlteam);
      while ($sqlrow = mysqli_fetch_array($resultsteam)){
        $teamid = $sqlrow['team_id'];
    ?>
        <p><a href="#" onclick="displaySeason('<?php echo $teamid ?>')" id="menu_teamname"><?php echo $sqlrow['teamname']; ?></a></p>
<?php
     }
     mysqli_close();
 }
 mysqli_close();
?>
</div>
<button id="team-season">Add Team</button>

JQuery

 $(document).ready(function(){
      $('.menu').accordion();
  });

 

 

 

Attached is a picture of a menu describing what I am trying to do.

 

Thank you for the help,

Mike