Powershell - html: create html from get-addirectreports?

Hi,

I would like to create an html report from this PS function.
https://gallery.technet.microsoft.com/scriptcenter/Get-ADDirectReport-962616c6

Iow: get-addirectreports -identity managersamaccountname shows all members in team of this manager.
I then would like to have a html which shows

MANAGER
member1 member2 member3

each of those members should then be clickable so if you click you can see the members below it
f.e you click member1, you get all members in team of manager member1

Hope this is clear, thanks for your input.
J.
janhoedtAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jeremy WeisingerSenior Network Consultant / EngineerCommented:
Shaun VermaakTechnical SpecialistCommented:
janhoedtAuthor Commented:
I know how to make html. It s the clickable part and the generation of the organogram in html combined with powershell that I m looking for.
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

janhoedtAuthor Commented:
Let me clarify: this is what I'm looking for, BUT it should expand/collapse when you click on an item:
https://codepen.io/bernardoantunes/pen/inrbh
Jeremy WeisingerSenior Network Consultant / EngineerCommented:
Oh, I see. Sorry I didn't read your question carefully. That's getting beyond the basics of HTML and unfortunately I will be of no help. :(
janhoedtAuthor Commented:
Got some code here wat works, but would need to make it clickable so it expands.
The button css can do that, but then it is a button and it should stay text.


<HTML><TITLE>Organogram generated on 07-11-2017 21-51-26</TITLE>    <BODY>
<style type="text/css">
    <!--
    body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    #report { width: 835px; }

    table{

    border-collapse: collapse;
    border: 1px solid #FFFFFF;

    font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: black;
    margin-bottom: 10px;
    }

    table td{
    border-collapse: collapse;
    border: 1px solid #FFFFFF;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;

    }

    table th {
    border-collapse: collapse;
    border: 2px solid ##FFFFFF;
   
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;

    }

    h2{ clear: both; font-size: 130%; color: black; }

    h3{
    clear: both;
    font-size: 115%;
    margin-left: 20px;
    margin-top: 30px;
    color: brown;
    }

    h4{
    clear: both;
    font-size: 90%;
    margin-left: 20px;
    margin-top: 30px;
    }

    }
   
    button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 25%;
    border: none;
    text-align: center;
    outline: none;
    transition: 0.4s;
    }

    button.accordion.active, button.accordion:hover {
    background-color: #ddd;
    }

    div.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    }

    div.panel.show {
    display: block;
    }

    * Code based on this sample http://thecodeplayer.com/walkthrough/css3-family-tree */

/*Now the CSS*/
.tree * {margin: 0; padding: 0;}

.tree ul {
      padding-top: 20px; position: relative;
      
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
}

.tree li {
      float: left; text-align: center;
      list-style-type: none;
      position: relative;
      padding: 20px 5px 0 5px;
      
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
      content: '';
      position: absolute; top: 0; right: 50%;
      border-top: 1px solid #8dc63f;
      width: 50%; height: 20px;
}
.tree li::after{
      right: auto; left: 50%;
      border-left: 1px solid #8dc63f;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
      display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
      border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
      border-right: 1px solid #8dc63f;
      border-radius: 0 5px 0 0;
      -webkit-border-radius: 0 5px 0 0;
      -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
      border-radius: 5px 0 0 0;
      -webkit-border-radius: 5px 0 0 0;
      -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
      content: '';
      position: absolute; top: 0; left: 50%;
      border-left: 1px solid #8dc63f;
      width: 0; height: 20px;
}

.tree li a{
      border: 1px solid #8dc63f;
      padding: 1em 0.75em;
      text-decoration: none;
      color: #666767;
      font-family: arial, verdana, tahoma;
      font-size: 0.85em;
      display: inline-block;
 
  /*
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
  */
      
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
}

/* -------------------------------- */
/* Now starts the vertical elements */
/* -------------------------------- */

.tree ul.vertical, ul.vertical ul {
  padding-top: 0px;
  left: 50%;
}

/* Remove the downward connectors from parents */
.tree ul ul.vertical::before {
      display: none;
}

.tree ul.vertical li {
      float: none;
  text-align: left;
}

.tree ul.vertical li::before {
  right: auto;
  border: none;
}

.tree ul.vertical li::after{
      display: none;
}

.tree ul.vertical li a{
      padding: 10px 0.75em;
  margin-left: 16px;
}

.tree ul.vertical li::before {
  top: -20px;
  left: 0px;
      border-bottom: 1px solid #8dc63f;
      border-left: 1px solid #8dc63f;
      width: 20px; height: 60px;
}

.tree ul.vertical li:first-child::before {
  top: 0px;
  height: 40px;
}

/* Lets add some extra styles */

div.tree > ul > li > ul > li > a {
  width: 11em;
}

div.tree > ul > li > a {
  font-size: 1em;
  font-weight: bold;
}


/* ------------------------------------------------------------------ */
/* Time for some hover effects                                        */
/* We will apply the hover effect the the lineage of the element also */
/* ------------------------------------------------------------------ */
.tree li a:hover, .tree li a:hover+ul li a {
      background: #8dc63f;
  color: white;
  /* border: 1px solid #aaa; */
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
      border-color:  #aaa;
}


}


    -->
    </style>
</head>
<H2>Organogram </H2><BR><div class="tree"> <ul> <li><a href='#'>General manager</a><ul  class="vertical">
<li> <a href='#'>Manager 2</a>
<li> <a href='#'>Manager3</a>
Shaun VermaakTechnical SpecialistCommented:
Post that in a jsfiddle.net share

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
janhoedtAuthor Commented:
Thanks, nice site btw. This is the report:
https://jsfiddle.net/janhoedt/amhsyzrk/#&togetherjs=b2auExk0lJ

So this is the idea of the organogram. Managers will contain submanagers till there are just members (not managers) which have no submembers. A few things I 'd like to have:

*Make everything collapsable
*Make it searchable, so if I look for a name, it expands till the specific name
*If possible: when searching for a name it should autofill the existing names
janhoedtAuthor Commented:
Any comment here howto proceed?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Powershell

From novice to tech pro — start learning today.