I have below code given in SLDS and I want to display this whenever the error occurs how can i achieve it? How can i display the toast and also close it on clicking the close button. I am using pure SLDS system and jquery. Any help in this would be appreciated.
<div class="slds-notify_container">
<div class="slds-notify slds-notify--toast slds-theme--error" role="alert">
<span class="slds-assistive-text">Error</span>
<button class="slds-button slds-notify__close slds-button--icon-inverse">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
<div class="slds-notify__content slds-grid">
<svg aria-hidden="true" class="slds-icon slds-icon--small slds-m-right--small slds-col slds-no-flex">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
</svg>
<div class="slds-col slds-align-middle">
<h2 class="slds-text-heading--small">You encountered some errors when trying to save edits to Samuel Smith.</h2>
</div>
</div>
</div>
</div>