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:
