How to add active class on click event in custom list group in Bootstrap 4 ?
In Bootstrap 4, Javascript or jQuery events are used to add active class on click event in custom list group.
Syntax:
$(document).ready(function() {
$('selector').click(function() {
$('selector.active').removeClass("active");
$(this).addClass("active");
});
});
Following examples illustrates how to add active class on click event in custom list group using jQuery in different ways.
Example 1: Below example illustrates how to add active class on click event in custom list group using jQuery through for loop.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src=" </script> <script src=" </script> <script src=" </script> </head> <body> <center> <div class="container"> <h1 class="text-success">GeeksforGeeks</h1> <h3>Active Item in a List Group</h3> </div> </center> <div class="list-group"> <a href="#!" class="list-group-item list-group-item-action flex-column align-items-start active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-2 h5">DSA Courses Available soon</h5> <small>1 days ago</small> </div> <p class="mb-2"> This course is will take you from basics to advance as well as it will certify you on the basis of your performance. </p> <small>Students, Working Professionals</small> </a> <a href="#!" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-2 h5">Placement 100</h5> <small>2 days ago</small> </div> <p class="mb-2"> This course will guide you for placements with theory, lecture videos, weekly assessments, contests and doubt assistance. </p> <small>Pre-final, Final year students</small> </a> <a href="#!" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-2 h5"> Machine Learning Foundation With Python </h5> <small>4 days ago</small> </div> <p class="mb-2"> Learn about the concepts of Machine Learning, effective machine learning techniques from basics with Python. </p> <small> Students, Working Professionals seeking a career in ML </small> </a> </div> <script> $(".list-group-item").click(function() { // Select all list items var listItems = $(".list-group-item"); // Remove 'active' tag for all list items for (let i = 0; i < listItems.length; i++) { listItems[i].classList.remove("active"); } // Add 'active' tag for currently selected item this.classList.add("active"); }); </script> </body> </html> |
Output:
Example 2: Below example illustrates how to add active class on click event in custom list group using jQuery along with addClass and removeClass of jQuery class attribute manipulation.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" <script src=" </script> <script src=" </script> <script src=" </script> </head> <body> <div class="container"> <h1 class="text-success text-center">GeeksforGeeks</h1> <h3>Active Item in a List Group</h3> <ul class="list-group"> <li class="list-group-item active">Active item</li> <li class="list-group-item">Click me to active item</li> <li class="list-group-item">Click me too active item item</li> </ul> </div> <script> $(document).ready(function() { $('li').click(function() { $('li.list-group-item.active').removeClass("active"); $(this).addClass("active"); }); }); </script> </body> </html> |
Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
.png)
