Need - HTML report with CSS/JS script

Hello,

I want to build a HTML report where I can get PowerShell properties output in html and each properties should Expand and Collapse by click or mouseover.

I tried but no luck. No able to club PowerShell and HTML CSS

Help required .

Regards,

Amol 

Regards, Amol Patil

$a = '<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="ddaccordion.js"></script><style type="text/css">

			.mypets{ /*header of 1st demo*/
			cursor: hand;
			cursor: pointer;
			padding: 2px 5px;
			border: 1px solid gray;
			background: #E1E1E1;
			}

			.openpet{ /*class added to contents of 1st demo when they are open*/
			background: yellow;
			}

		
			</style><script type="text/javascript">

			//Initialize first demo:
			ddaccordion.init({
				headerclass: "mypets", //Shared CSS class name of headers group
				contentclass: "thepet", //Shared CSS class name of contents group
				revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
				mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
				collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
				defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
				onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
				animatedefault: false, //Should contents open by default be animated into view?
				scrolltoheader: true, //scroll to header each time after its been expanded by the user?
				persiststate: true, //persist state of opened contents within browser session?
				toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when its collapsed and expanded, respectively ["class1", "class2"]
				togglehtml: ["none", "", ""], //Additional HTML added to the header when its collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
				animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
				oninit:function(expandedindices){ //custom code to run when headers have initalized
					//do nothing
				},
				onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
					//do nothing
				}
			})</script>'

$a = $a + '<style type="text/css">
      #Header{font-family:"Verdana", Arial, Helvetica, sans-serif;border-collapse:collapse;}
      #Header td, #Header th {font-size:12px;border:1px solid #98bf21;padding:3px 7px 2px 7px;}
      #Header th {font-size:10px;text-align:center;padding-top:5px;padding-bottom:4px;background-color:#cccccc;color:#000000;}
      #Header tr.alt td {color:#000;background-color:#EAF2D3;}
      H4 {color:#0099CC;}</Style>'
$a = $a + '<Table border=1 cellpadding=0 cellspacing=0 id=Header><caption align="left">' 

$Service = Get-Service | select -First 5
$Process = Get-Process | select -First 5 
$b = $a + "<div class='mypets'>Service</div><div class='thepet'>$Service</div>"
$C = "<div class='mypets'>Process</div><div class='thepet'>$Process</div>"
ConvertTo-Html -Title "Html Report Test" > ".\HTMLTEST.html"

$d = $a + $b
#$Service | ConvertTo-Html -Head $a -Body $b  >> ".\HTMLTEST.html"
ConvertTo-Html -Head $a -Body $d  >> ".\HTMLTEST.html"
ConvertTo-Html -Head $a -Body $c  >> ".\HTMLTEST.html"