# Toggle Shape on/off

**URL:** <https://forum.kirupa.com/t/toggle-shape-on-off/306793>\
**Category:** flash\
**Created:** [March 22, 2010, 3:19pm UTC](https://forum.kirupa.com/t/toggle-shape-on-off/306793 "2010-03-22T15:19:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Reean917](https://avatars.discourse-cdn.com/v4/letter/r/a698b9/32.png) [@Reean917](https://forum.kirupa.com/u/Reean917)\
**Post date:** [March 22, 2010, 3:19pm UTC](https://forum.kirupa.com/t/toggle-shape-on-off/306793/1 "2010-03-22T15:19:18Z")

</div>

Hello all,

I have a diagram with three buttons that when clicked, draws a line from that button to the corresponding movieclip on the stage. All this works fine but I’d like to build in a toggle button so I can turn each line off in any order. I’m having trouble understanding how to reference each shape that’s been draw on the stage so I can remove it. Here is my code, any help would be greatly appreciated.

Thanks.

```auto

var btnArray:Array = new Array(btn1, btn2, btn3);
var spotArray:Array = new Array(hotspot1, hotspot2, hotspot3);
var togArray:Array = new Array(tog1, tog2, tog3);
 
for (var i:Number = 0; i<3; i++) {
 btnArray*.addEventListener(MouseEvent.MOUSE_DOWN, buttonDown);
 togArray*.addEventListener(MouseEvent.MOUSE_DOWN, toggleDown);
}
 
function buttonDown(e:MouseEvent):void {
 for (var i:Number = 0; i<btnArray.length; i++) {
  if (e.target == btnArray*) {
   var line:Shape = new Shape();
   line.graphics.lineStyle(2, 0xCC0000, 1, false, LineScaleMode.HORIZONTAL, CapsStyle.ROUND, JointStyle.ROUND, 1);
   line.graphics.moveTo(btnArray*.x, btnArray*.y);
   line.graphics.lineTo(spotArray*.x, spotArray*.y);
   addChild(line);
  }
 }
}
 
function toggleDown(e:MouseEvent):void {
 trace("hit");
}

```