Hide/Show Jsp generated tables using Javascript? (screenshot)

[rudy23]

Hi Guys. Am relatively new to Javascript and need some advice on whether I should be using JavaScript for the following. Below is a screenshot of what my boss wants.



These are 3 Individual reports. The have been created by using JSP code which queries the database and generates these reports. What my boss wants is for reports to collapse/expand when the user clicks on the Hide Details Button using Javascript without repainting the page. Can this be done as the JSP’s themselves are pretty complex and resource intensive. Would the Javascript have to envelope the JSP code? I guess so. Is there any good robust javascript solution or should I just stick to repainting the whole page when he clicks the Hide Details Link. I wouldn’t mind buying a script if need be.

The data for all reports is available when the page loads and hence we wont have to make any database calls to Hide/Show.

Any guidance, Help reference greatly appreciated.

[Danne]

No you don't need to reload the page in order to expand/collapse the details. Put the part that you want to show and hide in one html element with a unique id. Then on the link you call a function like:

<a href="#" onclick="expand('unique_id');">

The function expand would look something like this:

function expand(id) {
    var el=document.getElementById(id);
    if (el.style.display!="none"){
        el.style.display="none";
    }else{
        el.style.display="block";
    }
}