How to toggle a control in OpenLayers

Question

I have a added Graticule control in my OpenLayers map. Now I want to toggle this using a control button. This what I have written:

function init() { 
      graticuleCtl = new OpenLayers.Control.Graticule({
                    numPoints: 2, 
                    labelled: true,
                    displayInLayerSwitcher: true
      });

    map = new OpenLayers.Map('map', {controls: []});
    map.addControl(graticuleCtl);
.
.
.
      var GraticuleCtl = new OpenLayers.Control.Button({
            displayClass: "olGraticule",
            title: "Show Graticule",
            trigger: showGraticule});

        // Panel (toolbar)
        Panel = new OpenLayers.Control.Panel({
            defaultControl: DragPanCtrl
        });
        Panel.addControls([
            .
            .
            .
            .
            GraticuleCtl
        ]);
        map.addControl(Panel);
}

function showGraticule() {
   if (graticuleCtl.visible==true){  
       graticuleCtl.deactivate();
       return true;
       }   
   else if (graticuleCtl.visible==false){
       graticuleCtl.activate();
       return true;
       }
   else{}
}

But this works for once only, since the 'visible' property checks only for initial map load.

Answer 1

visible is a parameter to the control. You should however be checking the active attribute to see if the control is on or not, and then you can toggle your control with something else (link/button/etc). API here.