AiSERTIVE-INCEPTION
diff --git a/‎with-JS/jquery-3.5.1.min.js
+2 b/‎with-JS/jquery-3.5.1.min.js
+2
diff --git a/‎with-JS/tabs.html
+83 b/‎with-JS/tabs.html
+83
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <title>Tabs</title>
+    <style>
+        * {
+            font-family: sans-serif;
+        }
+
+        body {
+            margin: 0 100px;
+        }
+        ul {
+            list-style: none;
+            margin:0;
+            padding:0;
+        }
+        ul li {
+            display: inline;
+            background-color: #ccc;
+        }
+        ul li a {
+            padding: 10px;
+            background-color: #ccc;
+        }
+        .active {
+            background-color: lightgreen;
+        }
+    </style>
+</head>
+<body>
+    <h1>Interactive Tabs</h1>
+    <div class="tab-section">
+        <ul>
+            <li><a id="tab1" href="#" class="active" >Action Need</a></li>
+            <li><a id="tab2" href="#" ><i class="fas fa-check-circle"></i>  Accepted</a></li>
+            <li><a id="tab3" href="#" ><i class="fas fa-times-circle"></i> Rejected</a></li>
+        </ul>
+    </div>
+
+    <div id="tab1C" class="container">
+        <h2>Tab1</h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias reprehenderit, rem officiis voluptates amet officia odio quisquam repellat commodi. Neque magnam, earum nisi nemo sit atque saepe, modi fugiat mollitia optio voluptas rem, vero ex quam veritatis delectus. Magnam unde consequuntur inventore molestiae voluptatem architecto rem repellat officiis! Repellat ex maxime sapiente perspiciatis praesentium aut numquam obcaecati tempora, omnis ad soluta esse voluptatum sint consectetur dolorum iusto fugit placeat sed maiores adipisci, voluptatibus facilis quisquam. Sequi numquam non id perferendis pariatur! Dolor praesentium distinctio sed nihil, ea consequuntur eius eum veniam impedit, earum ducimus facere quae aspernatur perspiciatis eveniet esse.</p>
+    </div>
+    
+    <div id="tab2C" class="container">
+       <h2>Tab2</h2>
+       <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore officia officiis ullam nulla nam ipsam, consectetur iusto quos ipsa assumenda dolorum neque molestiae perferendis repudiandae, itaque repellat, labore necessitatibus pariatur rerum odio non hic. Quisquam ipsa quasi nihil accusantium, itaque molestias cupiditate consequatur obcaecati aspernatur ipsam, neque corrupti doloremque molestiae tempora explicabo ea iste.</p>
+    </div>
+    
+    
+    <div id="tab3C" class="container">
+      <h2>Tab3</h2>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta, sapiente ipsa! Beatae, repellat, excepturi animi tempore possimus quia culpa tempora fuga atque aspernatur quaerat, esse eveniet aperiam eligendi non expedita cumque totam doloremque repellendus pariatur ullam deserunt facilis ipsam sapiente. Tempore, a omnis!</p>
+    </div>
+    
+
+</body>
+<script src="jquery-3.5.1.min.js"></script>
+<script>
+    /// Display container which has active class
+var id = $('.tab-section .active').attr('id');
+$('.container').hide();
+$('.container#'+id+'C').show();
+
+//// Change the tab when user clicks
+$('.tab-section a').click(function(){
+    // console.log(this.id);
+    if(!$(this).hasClass('active')) {
+        // $('.container').hide();
+
+        $('.tab-section a').removeClass('active');
+        $(this).addClass('active');
+        $('.container').hide();
+        $('.container#'+this.id+'C').show();
+    }
+});
+</script>
+
+</html>