How to add active class on click event in custom list group in Bootstrap 4 ?

03 Aug, 2021
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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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.
JavaScript-Misc
jQuery-Misc
Picked
Bootstrap
JavaScript
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.