Hide

Hides an element.

Example

Add yoi-action="Hide:#id;" to hide an element:

<!-- example -->
<button class="button button--large" yoi-action="Hide:#example-1;">Hide Instantly</button>
<div id="example-1" class="box p-4 m-t-4">
    <p class="fs-2">This will hide.</p>
</div>

Parent and Self Use the keyword parent to target the parent (=sourrounding) element. Use the keyword self to target the element itself.

Parameters

`on`	Optional – a valid event (learn more), the default event is `click`
`trigger`	Optional – the trigger element to listen to (learn more)
`fx`	Optional – fx utility class to add an animation
`speed`	Optional – `slow` or `fast`, speed for fx-animation
`remove`	Optional – if set to `true`, the target element is removed from the document
`toggle`	Optional - if set to `true`, the action toggles the visibility of the target element on each call (hiden when visible, shows when hidden)

Fx

Use the optional parameter fx to add an animation. Technically you can use all fx utility classes – however, only the following produce proper show-animations:

`.fx-fade-out`	fades out
`.fx-scale-down`	shrinks from original size to zero
`.fx-scale-down-y`	shrinks from original height to zero
`.fx-slide-out-top`	moves out to the top
`.fx-slide-out-bottom`	moves out to the bottom
`.fx-slide-out-left`	moves out to the left
`.fx-slide-out-right`	moves out to the right

<!-- example -->
<button class="button button--large" yoi-action="Hide:#example-2; fx:fade-out;">Hide with Fx</button>
<div id="example-2" class="box p-4 m-t-4">
    <p class="fs-2">This will hide with a fade-out-transition.</p>
</div>

Speed

Use the optional parameter speed and set it to fast or slow to control the fx animation speed:

<!-- example -->
<button class="button button--large" yoi-action="Hide:#example-3; fx:fade-out; speed:fast;">Hide Fast</button>
<div id="example-3" class="box p-4 m-t-4">
    <p class="fs-2">This will hide with a fast fade-out-transition.</p>
</div>

<!-- example -->
<button class="button button--large" yoi-action="Hide:#example-4; fx:fade-out; speed:slow;">Hide Slowly</button>
<div id="example-4" class="box p-4 m-t-4">
    <p class="fs-2">This will hide with a slow fade-out-transition.</p>
</div>

Remove

Use the optional parameter remove and set it to true to remove the target element from the document after hiding:

<!-- example -->
<button class="button button--large" yoi-action="Hide:#example-5; remove:true;">Hide & Remove</button>
<div id="example-5" class="box p-4 m-t-4">
    <p class="fs-2">This will hide and remove.</p>
</div>

With remove:true;, the target element will also trigger the event `yoi-hide`.

Toggle

Use the optional parameter toggle and set it to true to toggle the visibility: the action hides the target element when it’s visible and shows it when it’s hidden. Please note that toggle also applies the effects and reverses them like you would expect, eg. ‘fade-out’ becomes ‘fade-in’ while showing.

<!-- example -->
<button class="button button--large" yoi-action="Hide:#example-6; fx:fade-out; speed:slow; toggle:true;">Hide/Toggle</button>
<div id="example-6" class="box p-4 m-t-4">
    <p class="fs-2">This will hide when visible and show when hidden.</p>
</div>

Events

This action fires the following events on each element it is applied to:

`yoi-hide`	Fires when the element is hidden.
`yoi-remove`	Fires when the element is removed.

Source Files

actions/hide.js

Edit this page