<button class="trigger-flash" data-flash-type="success">Success</button>
<button class="trigger-flash" data-flash-type="notice">Warning</button>
<button class="trigger-flash" data-flash-type="error">Error</button>

<script>
  $('.trigger-flash').on('click', function(){
    type = $(this).data('flashType');
    flash = $("<div class='flash'>")
      .text(type)
      .addClass(type)
      .appendTo('.js-flash-wrapper');
  });
</script>

<button class="trigger-flash" data-flash-type="success">Success</button>
<button class="trigger-flash" data-flash-type="notice">Warning</button>
<button class="trigger-flash" data-flash-type="error">Error</button>

<script>
  $('.trigger-flash').on('click', function(){
    type = $(this).data('flashType');

    if (!$('.flash.' + type).is('*')) {
      flash = $("<div class='flash'>")
        .text(type)
        .addClass(type)
        .appendTo('.js-flash-wrapper')
        .on('click', function() {
          $(this).remove();
        });
    }
  });
</script>

Improve style guide flash messages UX
Improve style guide flash messages UX

Make flash messages in the style guide disappear when clicked upon and
avoid showing multiple flash messages of the same instance if clicked
multiple times.

Ref. #1958
