Bootstrap 5 Toast getOrCreateInstance() Method is used to get the already existing instance or create a new instance and return that to the caller. The returned instance can be used to call other methods for the toast component. This method accepts a DOM element or the selector for an element as the parameter.
Syntax:
bootstrap.Toast.getOrCreateInstance("#element-id");
Return Value: This method returns the Bootstrap 5 Toast instance to the caller.
Example 1: In this example, we used the getOrCreateInstance method to create the toast instance and then called its show method.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Bootstrap 5</ title >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div class = "mt-4" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >Bootstrap 5 Toasts getOrCreateInstance() Method</ strong >
</ div >
< div >
< button type = "button" class = "btn btn-success mt-4" id = "toastBtn" onclick = "getOrCreateInstanceANDShowToast()" >
getOrCreateInstance And Show Toast
</ button >
< div id = "gfg" class = "toast mt-4" role = "alert" >
< div class = "toast-header" >
Demo Survey Question.
</ div >
< div class = "toast-body" >
< p class = "border-bottom mb-3 pb-2" >
Are you interested in learning Bootstrap?
</ p >
< button type = "button" class = "btn" >Yes</ button >
< button type = "button" class = "btn" data-bs-dismiss = "toast" >
No
</ button >
</ div >
</ div >
</ div >
</ div >
< script >
function getOrCreateInstanceANDShowToast() {
bootstrap.Toast.getOrCreateInstance("#gfg").show();
}
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, we used the getOrCreateInstance method of the toast component to create the instance of the toast and then toggled it using the show and hide method.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Bootstrap 5</ title >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div class = "mt-4" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >
Bootstrap 5 Toasts getOrCreateInstance() Method
</ strong >
</ div >
< div >
< button class = "btn btn-success mt-4" id = "toastBtn" onclick = "getOrCreateInstance_AND_ShowToast()" >
getOrCreateInstance And Show Toast
</ button >
< br >
< button class = "btn btn-danger mt-2" id = "toastBtn" onclick = "getOrCreateInstance_AND_HideToast()" >
getOrCreateInstance And Hide Toast
</ button >
< div id = "gfg" class = "toast mt-5" role = "alert" >
< div class = "toast-header" >
About GeeksforGeeks.
</ div >
< div class = "toast-body" >
< p class = "border-bottom" >
GeeksforGeeks is a online computer science
portal for Geeks. It was founded in 2009
by Sandeep Jain, alumni of IIT-Roorkee.
</ p >
</ div >
</ div >
</ div >
</ div >
< script >
function getOrCreateInstance_AND_ShowToast() {
let instance = bootstrap.Toast.getOrCreateInstance("#gfg");
instance.show();
}
function getOrCreateInstance_AND_HideToast() {
let instance = bootstrap.Toast.getOrCreateInstance("#gfg");
instance.hide();
}
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.2/components/toasts/#methods