Javascript: expand/collapse functionality in a web page

Here is the script to implement expand/collapse functionality in a web page.

Javascript:

function toggle(showHideDiv, switchImgTag) 
{
        var elem = document.getElementById(showHideDiv);
        var imageElem = document.getElementById(switchImgTag);
        if(elem.style.display == "block") {
                elem.style.display = "none";
    imageElem.innerHTML = '';
        }
        else {
                elem.style.display = "block";
                imageElem.innerHTML = '';
        }
}

function Collapse(showHideDiv, switchImgTag) 
{
        var elem = document.getElementById(showHideDiv);
        var imageElem = document.getElementById(switchImgTag);
        
  elem.style.display = "none";
  imageElem.innerHTML = '';
}

function Expand(showHideDiv, switchImgTag) 
{
        var elem = document.getElementById(showHideDiv);
        var imageElem = document.getElementById(switchImgTag);
        
  elem.style.display = "block";
        imageElem.innerHTML = '';
}

function ExpandAll()
{
  var elements = document.getElementsByTagName("a");
  for (var i = 0; i < elements.length; i++) 
  {
      var myname = elements[i].getAttribute("id");
    if(myname != null)
    {
       if(myname.substr(0, 4) == "img-")
     {
      var linkid = myname.substr(4);
      Expand("div-"+ linkid, "img-"+linkid);
     }
    }
  }
  document.getElementById('expand-all').style.display='none';
  document.getElementById('collapse-all').style.display='block';
}

function CollapseAll()
{
  var elements = document.getElementsByTagName("a");
  for (var i = 0; i < elements.length; i++) 
  {
      var myname = elements[i].getAttribute("id");
    if(myname != null)
    {
       if(myname.substr(0, 4) == "img-")
     {
      var linkid = myname.substr(4);
      Collapse("div-"+ linkid, "img-"+linkid);
     }
    }
  }
  document.getElementById('expand-all').style.display='block';
  document.getElementById('collapse-all').style.display='none';
}

Web Page:

Expand All 

Collapse All



Test1



TestID
Description
Actual
Expected
Time Taken
Result
Screen-Shot


Test-01
Test 01
PASS
PASS
 1 sec
Pass
None


Test-01
Test 02
PASS
FAIL
 5 sec
Fail
Click me










Test2



TestID
Description
Actual
Expected
Time Taken
Result
Screen-Shot


Test-01
Test 03
PASS
PASS
 1 sec
Pass
None


Test-01
Test 04
PASS
PASS
 2 sec
Pass
None


Test-01
Test 05
PASS
PASS
 3 sec
Pass
None

Stylesheet:

body, table {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12;
}

table {
    border-collapse: collapse;
    border: 1px solid #ccc;
}

th, td {
    padding-left: 0.3em;
    padding-right: 0.3em;
}

a {
    text-decoration: none;
}

.title {
    font-style: italic;
}

.selected {
    background-color: #ffffcc;
}

.status_done {
    background-color: #eeffee;
}

.status_passed {
    background-color: #00FF00;
}

.status_failed {
    background-color: #FF0000;
}

.status_notrun {
    background-color: #FFFF00;
}

.status_header {
    background-color: #FFA500;
}

.status_duration {
    background-color: #00FFFF;
}

.breakpoint {
    background-color: #cccccc;
    border: 1px solid black;
}