How to implement show/hide HTML template content on node click in JavaScript Diagram?

This article explains how to implement show/hide HTML template content on node click in a JavaScript Diagram. In The Syncfusion® JavaScript Diagram control offers support for rendering HTML template content on nodes, enabling seamless integration of dynamic content. In this article, we will demonstrate rendering multiple contents within a single HTML node and adjusting their visibility upon clicking the node.

Rendering HTML Template Nodes in Syncfusion® Diagram:

HTML elements can be incorporated into the diagram using the HTML-type node. The shape property of the node enables you to specify the type of node. The following code exemplifies the creation of an HTML node with a template.

<script
  id="nodeTemplate" type="text/x-template">
        <div id="parent">
    
            <p>Accounting Document
  Fact</p>
            <hr id="line"
  style="visibility:hidden">
            <div id="Sub_Child"
  style="width:50%height:75%;margin-right:
  20px;visibility:hidden">
                <p> Billing Type Code</p>
                <p> Billing Type
  </p>
                <p> Billing Description
  </p>
            </div>
        </div>
    </script>

We have implemented the functionality to show/hide the HTML template content based on a node click.

function showHide() {
        if
  (diagram.selectedItems.nodes.length > 0) {
            let element =
  document.getElementById("Sub_Child");
            let pElement =
  document.getElementById("parent");
            let line =
  document.getElementById("line");
          if
  (diagram.selectedItems.nodes[0].addInfo[0].show === "Hide") {
           
            element.style.visibility =
  "visible";
            line.style.visibility =
  "visible";
            pElement.style.height =
  "133px";
           
  diagram.selectedItems.nodes[0].height = 133;
            
  diagram.selectedItems.nodes[0].offsetY = 250;
           
  diagram.selectedItems.nodes[0].addInfo[0].show = "Visible";
            diagram.dataBind();
          } else {
            
            pElement.style.height =
  "30px";
            element.style.visibility =
  "hidden";
            line.style.visibility =
  "hidden";
            
  diagram.selectedItems.nodes[0].height = 30;
            
  diagram.selectedItems.nodes[0].offsetY = 200;
           
  diagram.selectedItems.nodes[0].addInfo[0].show = "Hide";
            diagram.dataBind();
          }
        }
}