show hide

<tr>
				<td ><input type=checkbox /></td>
				<td>2</td>
					<td class='list_submenu' onclick="showhide_list_submenu('2')">workmates
							<ul class = 'list_submenu_dropdown' id='2'>
								<li>Edit</li>
								<li>Contacts</li>
								<li>Delete</li>
							</ul>
						</td>
			</tr><tr>
				<td ><input type=checkbox /></td>
				<td>3</td>
					<td class='list_submenu' onclick="showhide_list_submenu('4')">test2
							<ul class = 'list_submenu_dropdown' id='4'>
								<li>Edit</li>
								<li>Contacts</li>
								<li>Delete</li>
							</ul>
						</td>
			</tr><tr>
				<td ><input type=checkbox /></td>
				<td>4</td>
					<td class='list_submenu' onclick="showhide_list_submenu('5')">test3
							<ul class = 'list_submenu_dropdown' id='5'>
								<li>Edit</li>
								<li>Contacts</li>
								<li>Delete</li>
							</ul>
						</td>
			</tr>

//question
how can i show hide the item dropdown submenu every time a user clicks on an element

//tried this
//js
$("document").ready(function() {
	// show hide the dropdown menu on page load
	$(".list_submenu_dropdown").hide();

}

function showhide_list_submenu(list_id){
	//show clicked item dropdown menu
	//add class to this id
	var test = $(list_id).addClass('test_submenu');
	//show hide on clicks
	test.toggle();
}

//css

.list_submenu_dropdown ,.test_submenu{
display: block;
position: absolute;
background-color: white;
border: 1px solid blue;
}