On this particular page, I have a toggleable table of information that expands and collapses when the user clicks on a clickable +/- icon. However, there seems to be an issue where if the user tabs to the icon and tries to expand/collapse it by pressing enter, the JavaScript function doesn't trigger; it only responds to mouse clicks. Here's how the relevant code looks in the JSP page:
<td>
<a onclick="hideShowTable(${count}, this.id)" style="cursor:hand"
title="Expand/Collapse Table" tabindex="40"
id="eCTable${count}"
>+
</a>
</td>
This is the corresponding JavaScript function being called:
function hideShowTable(tableCounter, id)
{
//Loop through all rows of the month
for(i=1; i<=12; i++)
{
var tableElm = document.getElementById("tableMonth"+ i +"_"+tableCounter);
//Toggle visibility of the div tag
if (tableElm.style.display == "block"){
tableElm.style.display = "none";
document.getElementById(id).innerText="+";
}
else{
tableElm.style.display = "block";
document.getElementById(id).innerText="-";
}
}
}