Bootstrap 5 List group getOrCreateInstance() Method
Bootstrap List group getOrCreateInstance() method is used to obtain the instance of a particular tab of the list Group. This method can work even when the instance is not pre-initialized and this method creates an instance if there isn’t one available.
The List group tab’s instance linked to a DOM element may be obtained using this static function or create one instance.
Syntax:
var tab-element = document .getElementById("listGroup-tab-id"); var tooltip-instance = bootstrap.Tooltip .getOrCreateInstance(tab-element);
Parameters: This method accepts an argument either an HTML element or its selector.
Return Value: This method returns the current Bootstrap 5 List group Tab instance to the caller. If no instance is yet created, it creates one.
Example 1: This example demonstrates how to implement the getOrCreateInstance() Method with the show() method. Here one tab’s instance is created with the getOrCreateInstance() Method but the second tab’s instance is pre-initialized.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "m-2" > < h1 class = "text-success" > w3wiki </ h1 > < h3 > Bootstrap 5 List getOrCreateInstance() Method </ h3 > < div role = "tabpanel" > < div class = "list-group m-5" id = "myList" role = "tablist" > < a class="list-group-item list-group-item-action active" data-bs-toggle = "list" href = "#ds" role = "tab" > Data Structures </ a > < a class="list-group-item list-group-item-action" data-bs-toggle = "list" href = "#algo" role = "tab" > Algorithms </ a > < a class="list-group-item list-group-item-action" data-bs-toggle = "list" href = "#bs" role = "tab" > Bootstrap </ a > < a class="list-group-item list-group-item-action" data-bs-toggle = "list" href = "#cpp" role = "tab" > C++ </ a > </ div > < div class = "tab-content m-5 p-3 bg-light" > < div class = "tab-pane active" id = "ds" role = "tabpanel" > A data structure is a group of data elements that provides the easiest way to store and perform different actions on the data of the computer. A data structure is a particular way of organizing data in a computer so that it can be used effectively. </ div > < div class = "tab-pane" id = "algo" role = "tabpanel" > The word Algorithm means ” A set of finite rules or instructions to be followed in calculations or other problem-solving operations ” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently involves recursive operations” </ div > < div class = "tab-pane" id = "bs" role = "tabpanel" > Bootstrap is a free and open-source collection of CSS and JavaScript/ jQuery code used for creating dynamic websites layout and web applications. </ div > < div class = "tab-pane" id = "cpp" role = "tabpanel" > C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented and generic programming features. </ div > </ div > </ div > < br > < div class="container d-flex flex-column w-50 text-center"> < button class = "btn btn-danger m-2" id = "showDSBtn" > Create Or Get instance, and Show Data Structures Tab </ button > < button class = "btn btn-danger m-2" id = "showBSBtn" > Create Or Get instance, and Show Bootstrap Tab </ button > </ div > < script > var dsEl = document.getElementsByClassName( 'list-group-item')[0]; var dsElTab = new bootstrap.Tab(dsEl) var bsEl = document.getElementsByClassName( 'list-group-item')[2]; var bsElTab = new bootstrap.Tab(bsEl) var sDSBtn = document.getElementById('showDSBtn') var sBSBtn = document.getElementById('showBSBtn') sDSBtn.addEventListener('click', function () { // Creating a new Instance for DS Tab var dsInstance = bootstrap.Tab.getOrCreateInstance(dsEl); dsInstance.show() }) sBSBtn.addEventListener('click', function () { var bsInstance = bootstrap.Tab.getOrCreateInstance(bsEl); bsElTab.show() }) </ script > </ body > </ html > |
Output:
Example 2: This example demonstrates how to implement the getOrCreateInstance() Method with the dispose() method. Here one tab’s instance is pre-initialized but the second tab’s instance gets created with the getOrCreateInstance() Method.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "m-2" > < h1 class = "text-success" > w3wiki </ h1 > < h3 > Bootstrap 5 List getOrCreateInstance() Method </ h3 > < div role = "tabpanel" > < div class = "list-group m-5" id = "myList" role = "tablist" > < a class="list-group-item list-group-item-action active" data-bs-toggle = "list" href = "#ds" role = "tab" > Data Structures </ a > < a class="list-group-item list-group-item-action" data-bs-toggle = "list" href = "#algo" role = "tab" > Algorithms </ a > < a class="list-group-item list-group-item-action" data-bs-toggle = "list" href = "#bs" role = "tab" > Bootstrap </ a > < a class="list-group-item list-group-item-action" data-bs-toggle = "list" href = "#cpp" role = "tab" > C++ </ a > </ div > < div class = "tab-content m-5 p-3 bg-light" > < div class = "tab-pane active" id = "ds" role = "tabpanel" > A data structure is a group of data elements that provides the easiest way to store and perform different actions on the data of the computer. A data structure is a particular way of organizing data in a computer so that it can be used effectively. </ div > < div class = "tab-pane" id = "algo" role = "tabpanel" > The word Algorithm means ” A set of finite rules or instructions to be followed in calculations or other problem-solving operations ” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently involves recursive operations” </ div > < div class = "tab-pane" id = "bs" role = "tabpanel" > Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. </ div > < div class = "tab-pane" id = "cpp" role = "tabpanel" > C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented and generic programming features. </ div > </ div > </ div > < br > < div class="container d-flex flex-column w-75 text-center"> < button class = "btn btn-danger m-2" id = "disposeAlgoBtn" > Create Or Get instance, and Dispose Algo Tab </ button > < button class = "btn btn-danger m-2" id = "disposeCPPBtn" > Create Or Get instance, and Dispose cpp Tab </ button > </ div > < script > const algoEl = document.getElementById('algo'); const algoElTab = new bootstrap.Tab(algoEl) const cppEl = document.getElementById('cpp'); const disAlgoBtn = document.getElementById('disposeAlgoBtn') const disCPPBtn = document.getElementById('disposeCPPBtn') disAlgoBtn.addEventListener('click', function () { var algoInstance = bootstrap.Tab.getOrCreateInstance(algoEl); // Instance before disposing console.log(algoInstance); algoInstance.dispose() // Instance after disposing console.log(algoInstance); }) disCPPBtn.addEventListener('click', function () { // Creating a new Instance for CPP Tab var cppInstance = bootstrap.Tab.getOrCreateInstance(cppEl); // Instance before disposing console.log(cppInstance); cppInstance.dispose() // Instance after disposing console.log(cppInstance); }) </ script > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#getorcreateinstance
Contact Us