Search.../
  1. APIs

show( )

Shows the element and sets its hidden property to false, using an effect if specified.

Description

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

  • "arc"
  • "bounce"
  • "fade"
  • "flip"
  • "float"
  • "fly"
  • "fold"
  • "glide"
  • "puff"
  • "roll"
  • "slide"
  • "spin"
  • "turn"
  • "zoom"

Notes:

  • In Editor X, show () will not make an element visible for a given breakpoint if the element has been set to "Don't Display" for that breakpoint. Calling show() will however, change the hidden property of the element to false.

  • It is recommended not to mix show and hide with "Don't Display" in Editor X.

Syntax

function show([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>

show Parameters

NAME
TYPE
DESCRIPTION
effectName
Optional

string

The name of the effect to play when showing the item.

effectOptions
Optional

ArcEffectOptions

|

BounceEffectOptions

|

FadeEffectOptions

|

FlipEffectOptions

|

FloatEffectOptions

|

FlyEffectOptions

|

FoldEffectOptions

|

GlideEffectOptions

|

PuffEffectOptions

|

RollEffectOptions

|

SlideEffectOptions

|

SpinEffectOptions

|

TurnEffectOptions

|

ZoomEffectOptions

The effect's options.

Returns

Fulfilled - When the effect is complete and the element's hidden property has been set to false.

Return Type:

Promise<void>

Related Content:

hide( ), hidden, expand( )

Was this helpful?

Show an element with no effect

Code Example

Copy Code
1$w("#myElement").show();
Show an element with the "fade" effect

Code Example

Copy Code
1$w("#myElement").show("fade");
Show an element with the "fade" effect and custom options

Code Example

Copy Code
1let fadeOptions = {
2  "duration":   2000,
3  "delay":      1000
4};
5
6$w("#myElement").show("fade", fadeOptions);
Show an element with an effect and log a message when the effect is done

Code Example

Copy Code
1$w("#myElement").show("fade")
2  .then( ( ) => {
3    console.log("Done with fade");
4  } );
Toggle an element's hidden state

Code Example

Copy Code
1if( $w("#myElement").hidden ) {
2  $w("#myElement").show();
3}
4else {
5  $w("#myElement").hide();
6}