Dynamic Accordion Menu Using oracle java/j2ee and jquery

Dynamic Accordion Menu - oracle table
Dynamic Accordion Menu - oracle table

Sometimes we need ‘Accordion Menu ‘ in our project. I feel jquery is the best options for that. Very easily we can make Accordion Menu using jquery and HTML. Here I am going to show how to make Dynamic ‘Accordion Menu’ using oracle, java and jquery. Whenever we need a new Menu item or new menu with menu items just, l enters the details into database and it will show you dynamic menu in runtime.


Table for Menu

oracle table
Dynamic Accordion Menu – oracle table

Sample data

Accordion Menu
Accordion Menu data

Group 1



  1. Core Java
  2. Jsp
  3. Servlets
  4. Struts


Group 2


  1. Oracle
  2. PL/Sql
  3. Sql server

By seeing the database you can understand, we have two groups

1) Java/J2ee and

2) Database


Item_type ‘header’ is basically main group and Item_type  ‘item’ is menu item under the group . Item_group tells which item is under which group.

3.Dynamic Accordion Menu Using oracle java/j2ee and jquery
Dynamic Accordion Menu Using oracle java/j2ee and jquery



package com.codewale.example;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;

public class DynamicMenu {

public Map getMenuItems()

Map menuMap=null;
Connection connection=null;

menuMap=new HashMap();
try {
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block

try {
connection = DriverManager.getConnection(
“jdbc:oracle:thin:@localhost:1521:XE”, “CHRIST”,
Statement st=connection.createStatement();

ResultSet rs= st.executeQuery(“select menu_item from dynamic_menu where item_type=’header’ order by item_order”);

Statement st1=connection.createStatement();
String group=rs.getString(“menu_item”);
ResultSet rs1= st1.executeQuery(“select menu_item,link_page,tool_tip,item_order from dynamic_menu where item_type=’item’ and item_group='”+group+”‘ order by item_order”);
List menuList=new ArrayList();
Map columnMap= new HashMap();
columnMap.put(“menu_item”, rs1.getString(“menu_item”));
columnMap.put(“link_page”, rs1.getString(“link_page”));
columnMap.put(“tool_tip”, rs1.getString(“tool_tip”));
menuList.add((rs1.getInt(“item_order”)-1), columnMap);

menuMap.put(group, menuList);


} catch (SQLException e) {
// TODO Auto-generated catch block

return menuMap;






<%@ page import=”com.codewale.example.DynamicMenu” %>
<%@ page import=”java.util.Map,java.util.Set,java.util.List;” %>
<%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Insert title here</title>

<script type=”text/javascript” src=”./js/jquery-1.2.6.min.js”></script>
<script language=”javascript”>
function initMenu() {
$(‘#menu ul’).hide();
$(‘#menu ul:first’).show();
$(‘#menu li a’).click(
function() {
var checkElement = $(this).next();
if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
return false;
if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
$(‘#menu ul:visible’).slideUp(‘normal’);
return false;
$(document).ready(function() {initMenu();});
<style type=”text/css”>
border:1px solid #9EE3FF;
ul#menu, ul#menu ul {
margin: 0;
padding: 0;


ul#menu a {
display: block;
text-decoration: none;

ul#menu li {
margin-top: 1px;
border-top:1px dotted #D9F2FC;

ul#menu li a {
background: #D3EFFB;
color: #03597D;
padding: 0.5em;

ul#menu li a:hover {
background: #C8EBFA;

ul#menu li ul li a {
background: #FFFFFF;
color: #03597D;


ul#menu li ul li a:hover {
background: #F7FCFE;
border-left: 5px #03597D solid;

<table width=”20%”>
DynamicMenu dm= new DynamicMenu();
Map menuMap=dm.getMenuItems();

Set<String> keys = menuMap.keySet();
out.print(“<ul id=\”menu\”>”);/////////////start of menu
for(String key: keys){

out.print(“<a href=\”#\”>”+key+”</a>”);
List itemList=(List)menuMap.get(key);

for(int i=0;i<itemList.size();i++)
Map columnMap=(Map)itemList.get(i);
String menu_item=columnMap.get(“menu_item”).toString();
String link_page=columnMap.get(“link_page”).toString();
String tool_tip=columnMap.get(“tool_tip”).toString();
out.print(“<li><a href=\””+link_page+”\” title=\””+tool_tip+”\”>”+menu_item+”</a></li>”);
out.print(“</ul>”); ///////////end of menu
catch(Exception e)




dynamic menu
dynamic menu
Profile photo of Nirmal Dhara
About Nirmal Dhara 28 Articles
Java Developer

Be the first to comment

Leave a Reply

Your email address will not be published.