Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Hard
  • Last Updated : 03 Aug, 2021

In Bootstrap 4, Javascript or jQuery events are used to add active class on click event in custom list group.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

$(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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!