Dismissible

The dismissible component allows for elements to be hidden using a trigger. This is a global component and is used by default on the notices block to make them dismissible. This component can be used by initiating the dismissible JavaScript using the init() method.

dismissible.init();
<!-- Paragraph -->
<p class="dismissible">... <a href="#" class="dismiss">Close</a></p>

<!-- Div -->
<div class="dismissible">
  <p>... <a href="#" class="dismiss">Close</a></p>
</div>

<!-- Notice -->
<div class="notice dismissible">
  <button class="dismiss close">...</button>
  ...
</div>

Simple paragraph—Close

Random div—Close

Dismissible notice.

Options

When initiating the dismissible component, you can pass in the following options to override defaults.

Parameter Type Default Description
classTrigger String 'dismiss' Class name for the trigger element
classDismissible String 'dismissible' Class name for item to dismiss
classHide String 'hide' Class name for hidden state

.init()

Initializes the dismissible component using either default settings or custom options passed in.

dismissible.init( options )
Parameter Type Description
options JSON Custom options for component

.destroy()

Destroys the dismissible component by removing event listeners and clearing the settings variable.

dismissible.destroy()

.showAll()

Show all the available dismissible elements based on the passed selector or all elements in the document if a selector is not passed.

dismissible.showAll( selector[optional] )
Parameter Type Description
selector String [Optional] Selector to search for dismissible elements

Example Usage

<div class="demo demo-2">
  <button onclick="dismissible.showAll('.demo-2');">Show All</button>
  ...
</div>

Dismissible

Dismissible

.hideAll()

Hide all the available dismissible elements based on the passed selector or all elements in the document if a selector is not passed.

dismissible.hideAll( selector[optional] )
Parameter Type Description
selector String [Optional] Selector to search for dismissible elements

Example Usage

<div class="demo demo-3">
  <button onclick="dismissible.hideAll('.demo-3');">Hide All</button>
  ...
</div>

Dismissible

Dismissible

.getDismissible()

Gets a NodeList of all the available dismissible elements based on the passed selector. If no selector is passed, a query is done on the entire document.

dismissible.getDismissible( selector[optional] )
Parameter Type Description
selector String [Optional] Selector to search for dismissible elements
Return NodeList

Example Usage

<div id="mydiv">
  <div class="foo dismissible">
    <p>This is a random div. <a href="#" class="close">Close</a></p>
  </div>
  <div class="bar dismissible">
    <p>This is a random div. <a href="#" class="close">Close</a></p>
  </div>
</div>
dismissible.getDismissible( '#mydiv' );
// Returns: [div.foo.dismissible, div.bar.dismissible]

© 2018 . All rights reserved.