title: JQuery / JsPlumb: toggle "hidden/visible" anchor with checkbox starting from Hidden
body: <p>I've wrote something using JsPlumb Library. </p>
  
  <p>I got three elements that start using </p>
  
  <pre><code>`display:none;` 
  </code></pre>
  
  <p>and then i use the typical Jquery code for make them appear flagging a checkbox:</p>
  
  <pre><code>input type="checkbox" id="nameCB" name="nameCB" value="on"
  
  $('#nameCB').click(function(){
      this.checked?$('#elementID').show(1000):$('#elementID').hide(1000);
  </code></pre>
  
  <p><strong>My problem is</strong> if i set an anchor for one of these elements:</p>
  
  <pre><code>jsPlumb.addEndpoint('elementID', {anchor:"BottomCenter" }, endpointOptions );
  </code></pre>
  
  <p>the anchor (in the default case is a gray circle) is always visible.
  I would like to make it visible ONLY when the element it is connected is visible.</p>
  
  <p>UPDATE:</p>
  
  <pre><code>I solved creating a connection only when the checkbox is flagged an detaching it otherwise: 
  
  $('#ckFI').click(function(){
      this.checked?$('#firenze').show(1000):$('#BBB').hide(1000);
      this.checked?apparizione():scomparsa(); 
   });
  function apparizione() {
      jsPlumb.connect({
    source:"AAA", 
    target:"BBB",
    anchors:["Top", "Bottom" ],
  });
  }
  function scomparsa() {
      jsPlumb.detach({source:"AAA", target:"BBB"});
  }
  </code></pre>