Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.



Last Updated : 03 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads