Live Demo - jQuery toggleClass

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery addClass() Demo</title>
<style>
    .heading--text{
        
        text-align: center;
        font-size: 20px;
        margin-top: 20px;
      padding:10px;
    }

    .heading-color{
       color: black; 
    }
    
    .heading-bg-color{
        background-color: lightgrey;
    }

    .text--style{
       font-size: 18px;
       font-style: italic;
       color: black;
    }
  .btn-effect{
    padding:15px 30px;
    background-color:black;
    font-size:20px;
    color:white;
    border:none;
    border-radius:5px;
  }
  
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn-effect").click(function(){
        $("h2").addClass("heading--text");
        $("p").toggleClass("heading-bg-color");
    });
});
</script>
</head>
<body>
    <h1>Demo Text</h1>
    <p class="heading--text heading-color heading-bg-color ">Let us see the jquery addClass() method.</p>
    <button type="button" class="btn-effect">Add Class</button>
</body>
</html>
Source Code

Source Code Output :Running
