Active section

by anoopsuda

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
 <span class="set">
 <ul>
 <li>XXXXXX</li>
  <li>XXXXXX</li>
   <li>XXXXXX</li>
 </ul>
 </span>
 <div class="set">
 <ul>
 <li>XXXXXX</li>
  <li>XXXXXX</li>
   <li>XXXXXX</li>
 </ul>
 </div>
  <div class="set">
 <ul>
 <li>XXXXXX</li>
  <li>XXXXXX</li>
   <li>XXXXXX</li>
 </ul>
 </div>
  <div class="set">
 <ul>
 <li>XXXXXX</li>
  <li>XXXXXX</li>
   <li>XXXXXX</li>
 </ul>
 </div>

CSS

.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}
.set.important  {border:solid 1px green;}
.set {border:solid 1px red;}

JavaScript

$(document).ready(function(){
  $("li").click(function(){  
     $(this).parent("ul").closest(".set").addClass("important");
      $(this).parent("ul").closest(".set").siblings().removeClass("important");
    
  });
});