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

2 mins read

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();
          }
        }
}

Here the showHide method is triggered when the parent div is clicked. It checks the visibility state of an inner div named ‘Sub_Child’ and toggles its visibility along with associated elements such as ‘parent’ and ‘line’. The method dynamically adjusts the height and offset properties of the selected node based on its current visibility state, providing a simple way to show or hide HTML template content on node click. Refer the following sample for more information.

Sample:

Click here for sample

Conclusion

I hope you enjoyed learning about how to implement show/hide HTML template content on node click in JavaScript Diagram.

You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

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

Rendering HTML Template Nodes in Syncfusion® Diagram:

Sample:

Access denied