Hiding / Showing a Table with JavaScript

Question

hi i have atable with some data and i have expand and Collapse button there if we click on + it will expand and show table and if we click on-it will collapse and i am using following code but i am getting error with

document.getElementById('eleName');

imageXchk='expand';  
loadedCheck='false';
function toggleDisplayCheck(e, tableSize){

element = document.getElementById(e).style;
 if (element.display=='none') {
    element.display='block';
    }
 else {
    element.display='none';
    }

 if (loadedCheck=='false') {
    myUpdater('returnsDetailsTable', '/oasis/faces/merchant/dashboard/ReturnsDetailsCheck.jsp', { method: 'get' }); 
    loadedCheck='true'
    }

    size = tableSize-1;
    eleName = 'mercPerfDashboardForm:returnsDetailsTable:' + size +':switchimageRetChk'
 if (imageXchk=='collapse') {
    document.getElementById('eleName').src='${pageContext.request.contextPath}/images/expand.gif';imageXchk='expand';
    }
  else {
    document.getElementById('eleName').src='${pageContext.request.contextPath}/images/collapse.gif';imageXchk='collapse';
    }   
    return false;
}

Answer 1

you can use jQuery to do this very very simple:

$("#table_id").hide();  // hide the table
$("#table_id").show();  // show the table

Answer 2

If the element's style's display property hasn't been explicitly set previously in JavaScript, it will be empty, even if the element is hidden via some CSS rule. The easiest thing to do would be to know what the initial state (hidden or visible) is and assume that state if the display property is empty:

if (element.display=='none' || element.display=='') {
    element.display='block';
    }
 else {
    element.display='none';
    }