Hi there! I need help with writing a JavaScript function for Hospitals in the code below. When I click on Hospitals, I want to display the values in the unordered list.
Expected output: Hospitals--->onclick Bangalore| salem |Goa| Mangalore| Visakhapatnam |Vijawada| jaipur| Malaysia
I am not sure how to call ul id using a function.
Updated HTML:
<div id="locations">
<h1>Locations</h1>
<div id="locations1">
<table cellpadding="0" cellspacing="0" border="0">
<tr class="hospitails" onClick="">
<td class="hospitails_class" onClick="">Hospitails</td>
<td class="clinics_class" onClick="">Clinics</td>
<td class="homecare_class" onClick="">Home Care</td>
<td class="information_class" onClick="">Information Centers</td>
</tr>
</table>
<div class="hospitails_loc">
<ul>
<li><a href="#">Bangalore</a></li>
<li><a href="#">salem</a></li>
<li><a href="#">Goa</a></li>
<li><a href="#">Mangalore</a></li>
<li><a href="#">Visakhapatnam</a></li>
<li><a href="#">Vijawada</a></li>
<li><a href="#">jaipur</a></li>
<li><a href="#">Malaysia</a></li>
</ul>
</div>
<div class="clinics_loc">
<ul>
<li><a href="#">Lagos(Nigeria)</a></li>
</ul>
</div>
<div class="homecare_loc">
<ul>
<li><a href="#">Bangalore</a></li>
<li><a href="#">Jaipur</a></li>
</ul>
</div>
<div class="information_loc">
<ul>
<li><a href="#">Andhrapradesh</a></li>
<li><a href="#">Karnataka</a></li>
<li><a href="#">Goa</a></li>
<li><a href="#">Tamil Naidu</a></li>
</ul>
</div>
</div>
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$("tr").click(function(event) {
alert(event.target.id+" and "+$(event.target).attr('class'));
});
});
</script>