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=
"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>

chevron_right






                        filter_none








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"


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> 



















                        chevron_right







                        filter_none








Output:




full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
VigneshKannan3
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.