Search.../

hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

Description

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

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding 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"

You can also hide an element when the page loads by using the Properties panel in the Editor.

Syntax

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

hide Parameters

NAME
TYPE
DESCRIPTION
effectName
Optional

string

The name of the effect to play when hiding 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 true.

Return Type:

Promise<void>
Mixed in from:$w.HiddenMixin

Related Content:

Was this helpful?

Hide an element with no effect

Code Example

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

Code Example

Copy Code
1$w("#myElement").hide("fade");
Hide 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").hide("fade", fadeOptions);
Hide an element with an effect and log a message when the effect is done

Code Example

Copy Code
1$w("#myElement").hide("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}