Navigating Vuforia Studio > Widgets > 3D > 3D Toggle Button
  
3D Toggle Button
* 
This widget is only available in 3D Eyewear projects.
What Does This Widget Do?
The 3D Toggle Button widget allows you to present the state of items and data in a 3D Eyewear Experience.
When Should I Use This Widget?
A 3D Toggle Button widget can be useful when you want to toggle other panels or widgets to avoid the Experience becoming cluttered. For example, if you want to be able to show and hide a 3D image in an Experience, you can use a 3D Toggle Button that allows the frontline user to choose when they want to display it.
Are There Any Special Properties, Services, Events, or Actions?
To view a list of common widget properties, services, and events, see Common Widget Properties, Services, and Events.
The following table is a list of properties that are specific to this widget.
Property
Description
Text
If text is entered for this property it will appear next to the 3D Toggle Button.
Pressed
If selected, the toggle will be pressed by default in your Experience.
Height
Height of the button in meters. The minimum value is 4 cm.
Width
Width of the button in meters. The minimum value is 4 cm.
Font Color
Color of the font. Select a color from the color picker.
Button Color
Color of the button. Select a color from the color picker.
Service
Description
Set
Puts the button into the pressed state. If the button is selected, the pressed event will fire.
Reset
Puts the button into an unpressed state. If the button is selected, the unpressed event will fire.
Event
Description
Pressed
Triggered when the button is pressed. If the button is disabled, the event is not triggered.
Unpressed
Triggered when the button is not pressed. If the button is disabled, the event is not triggered.
The Widget in Action
Here’s an example of what your widget might look like!
Instructions
What It Looks Like
* 
This widget is best used with a 3D Panel.
1. Drag and drop a 3D Panel widget onto the canvas.
2. Drag and drop a 3D Toggle Button widget onto the canvas. Move the widget to position where you want it.
* 
After you drag and drop the widgets onto the canvas, you’ll need to nest them underneath the panel widget in the Views tree by dragging and dropping them under the panel widget.
3. Also for this example, we added a 3D Label next to the 3D Toggle Button that says Show Instructional Video.
4. Drag and drop a 3D Video widget onto the canvas.
5. Add the following code to Home.js:
$scope.showVideo = function(){
$scope.view.wdg['3DVideo-1']['visible'] = true;
}

$scope.hideVideo = function(){
$scope.view.wdg['3DVideo-1']['visible'] = false;
}
6. Navigate back to the Details pane of the 3D Toggle Button, an scroll down to Events.
7. Click JS next to the Pressed event, and enter showVideo().
8. Click JS next to the Unpressed event, and enter hideVideo().
Now, when you toggle the Show Instructional Video button, the 3D Video appears.