index.html

  
 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CoVex</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/ico" href="assets/covex_logo_small.png">
  <script src="https://kit.fontawesome.com/3ad4fe992f.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<button onclick="setNetwork('netexp1')">Set Network 1</button>
<button onclick="setNetwork('netexp2')">Set Network 2</button>
<div style="border: 3px solid red">
  <network-expander id="netexp1"></network-expander>
</div>
<div style="border: 3px solid red">
  <network-expander id="netexp2"></network-expander>
</div>
<script>
  function setNetwork(nw) {
    const netexp = document.getElementById(nw);

    netexp.setAttribute('network', JSON.stringify({
      nodes: [
        {
          name: "SIRT5",
          proteinAc: "Q9NXA8",
          proteinName: "NAD-dependent protein deacylase sirtuin-5"
        },
        {
          name: "RPL36",
          proteinAc: "Q9Y3U8",
          proteinName: "60S ribosomal protein L36"
        },
        {
          name: "G3BP2",
          proteinAc: "Q9UN86",
          proteinName: "Ras GTPase-activating protein-binding protein 2"
        }
      ],
      edges: []
    }));
  }
</script>
</body>
</html>