jQuery UI accordion menu from MySQL data

This tutorial shows you how to create a cool jQuery UI accordion menu with the data from a MySQL table using PHP. Also you will find out some classes to override the default style with custom css.

jquery ui accordion menu

Creating MySQL Table

Create a simple table called menu with 4 columns for this tutorial.

`name` VARCHAR(40) ,
`link` VARCHAR(100) ,
`parent` INT(10)  NULL,
PRIMARY KEY (`id`));

Insert some values to the table like in the sample below.


Rows with NULL parent id are parent menus

Basic HTML structure

This is the HTML structure we are aiming to create with the data from MySQL table.

<div id="accordion">
 <h3><a href="link">Parent Menu 1</a></h3>
 <li><a href="link">Sub Menu 1</a></li>
 <li><a href="link">Sub Menu 2</a></li>

Inserting basic jQuery UI accordion

First of all include jquery and jquery ui libraries and stylesheet. Then initialize accordion for the id #accordion like below.

 <meta charset="utf-8">
 <title>jQuery UI Accordion Menu- void Tricks</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$(function () {
 //initializing the accordion
 collapsible: true,
 heightStyle: "content"
<div id="accordion">
//php code will be placed here

PHP code

<div id="accordion"> 
//database connection
$con = mysqli_connect("hostname","user","pass","dbname") or die("Error " . mysqli_error($con)); 

$sql = "SELECT * FROM menu WHERE parent IS NULL";
$query = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($query)) {
 $id = $row['id'];
 $link = $row['link'];
 $name = $row['name'];
 echo '<h3><a href="'.$link.'">'.$name.'</a></h3>';

 $sql2 = "SELECT * FROM menu WHERE parent = '$id'";
 $query2 = mysqli_query($con, $sql2);
 echo '<div><ul>';
 while ($row2 = mysqli_fetch_array($query2)) {
 $link2 = $row2['link'];
 $name2 = $row2['name'];
 echo '<li><a href="'.$link2.'">'.$name2.'</a></li>';
 echo '</ul></div>';

Basically we have two while blocks. Outer block is for parent menu and the inner while block is for sub menus.

In outer while loop, we are fetching the ids of the rows with NULL parent id. These are the parent menus.

In inner while loop, we are fetching the rows with the parent id corresponding to the value fetched from outer loop.

Custom CSS

Finally we can change the default jquery ui accordion menu to something cool and flat using custom css.

    width: 300px;
  #accordion h3 {
    background: #3A5261;
    border: 1px solid #426377;
    border-radius: 0;
    margin: 0
  #accordion h3.ui-accordion-header-active{
    background: #548596;
    border: 1px solid #486E7B;
  #accordion h3.ui-accordion-header-active  a{
        color: #73D2AF;
    #accordion h3.ui-state-hover,#accordion h3.ui-state-focus, #accordion h3.ui-state-active{
        box-shadow: none;
  #accordion h3 a{
    color: #ffffff;
    #accordion div {
    padding:  0;
    border: none;
    border-radius: 0;

  #accordion div ul{
    list-style: none;
    margin: 0;

  #accordion div ul li{
        padding: 10px 39px 10px;
            background: #73D2AF;
                border: 1px solid #67C3A1;
  #accordion div ul li a{
    text-decoration: none;
        color: #424242;

Change the above styles according to your taste. And we’re done.

Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

Leave a Reply

Your email address will not be published. Required fields are marked *