StackOverFlow jsPlumb Test

HTML

<script src="http://yourjavascript.com/92221741163/jquery-jsplumb-1-5-1-min.js"></script>
<button type="button" onclick="hideCon();">Hide connections</button>
<button type="button" onclick="showCon()">Show connections</button>
<div>
    <div id="a" class="a window" style="display:none; width: 100px;height: 100px;border: solid 1px;top:30px;left:10px">VL0071P1
   </div>
<div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;top:60px;left:250px;"></div>

CSS

.window {
    background-color: white;
    border: 3px solid #346789;
    color: black;
    font-family: helvetica;
    font-size: 0.8em;
    height: 12em;
    opacity: 0.8;
    padding: 0.5em;
    position: absolute;
    width: 14em;
    z-index: 20;
    text-align:center;
}

.dragActive {
    border: 3px solid #346789;
}

JavaScript

jsPlumb.ready(function() {    
    var a = $("#a");
    var b = $("#b");
    
    var stateMachineConnector = {
        connector:"StateMachine",
        paintStyle:{lineWidth:3,strokeStyle:"#056"},
        hoverPaintStyle:{strokeStyle:"#dbe300"},
        endpoint:"Blank",
        anchor:"Continuous",
        overlays:[ ["Arrow", { location:[0.5,0.5], width:40, length:40 } ]]
    };

       jsPlumb.connect({
            source:"a",
            target:"b"
        }, stateMachineConnector);
    
        jsPlumb.connect({
            source:"b",
            target:"a"
        }, stateMachineConnector);
    
    jsPlumb.draggable($(".window"));
    jsPlumb.animate($("#b"), {"left": 50,"top": 300},{duration:"slow"});
    jsPlumb.animate($("#a"), {"left": 250,"top": 100},{duration:"slow"});
    
});

function hideCon(){
    $('.window').each(function(index){
          jsPlumb.hide(this.id, true);
      });
}

function showCon(){
    $('.window').each(function(index){
        jsPlumb.show(this.id, true);
    });
}