JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<button id="toggleLabels">Toggle labels</button>
<div id="mynetwork"></div>

CSS

#mynetwork {
  width: 600px;
  height: 400px;
  border: 1px solid lightgray;
}

JavaScript

var nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" },
]);

var edges = new vis.DataSet([
  { from: 1, to: 2, label: 'Edge 1' },
  { from: 2, to: 3, label: 'Edge 2' },
  { from: 3, to: 4, label: 'Edge 3' },
  { from: 4, to: 5, label: 'Edge 4' },
]);

var container = document.getElementById("mynetwork");
var data = {
  nodes: nodes,
  edges: edges,
};
var network = new vis.Network(container, data, {});

var displayLabels = true;
document.getElementById('toggleLabels').onclick = function() {
  if(displayLabels){    
  	displayLabels = false;
    data.edges.get().forEach(function(edge) {
    	if(edge.from == 1 && edge.to == 2) {
    		edge.label = undefined;
      } else if(edge.from == 2 && edge.to == 3) {
    		delete edge.label;
      } else if(edge.from == 3 && edge.to == 4) {
    		edge.label = '';
      } else if(edge.from == 4 && edge.to == 5) {
    		edge.label = ' ';
      }
      data.edges.update(edge);
    });
  } else {   
  	displayLabels = true;
  	data.edges.get().forEach(function(edge) {
    	if(edge.from == 1 && edge.to == 2) {
    		edge.label = 'Edge 1';
      } else if(edge.from == 2 && edge.to == 3) {
    		edge.label = 'Edge 2';
      } else if(edge.from == 3 && edge.to == 4) {
    		edge.label = 'Edge 3';
      } else if(edge.from == 4 && edge.to == 5) {
    		edge.label = 'Edge 4';
      }
      data.edges.update(edge);
    });
  }
}