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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.