diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index ab67cfa1495c..fdb2e352104c 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -45,7 +45,21 @@ Click the button below to show an alert (hidden with inline styles to start), th We use the following JavaScript to trigger our live alert demo: ```js -// tbd +var alertPlaceholder = document.getElementById('liveAlertPlaceholder') +var alertTrigger = document.getElementById('liveAlertBtn') + +function alert(message, type) { + var wrapper = document.createElement('div') + wrapper.innerHTML = '' + + alertPlaceholder.append(wrapper) +} + +if (alertTrigger) { + alertTrigger.addEventListener('click', function () { + alert('Nice, you triggered this alert message!', 'success') + }) +} ``` ### Link color diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index ec8cd3ac9d7c..8017ecdcd4a1 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -41,7 +41,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi {{< /example >}} -### Live +### Live example Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with `.hide`.