Simultaneously toggle active class in child li and at the same time toggle class in grand-parent div-CodePudding

I already know how to toggle the active class within each list item (li) when clicked.

But what I need is to copy the uniquely numbered class from the active li (example: .content-item-3.active) to the grand-parent div (.content-grand-dad) > (.content-grand-dad.content-item-3) when each li is toggled and active.

I do not mind if the code is through JQuery or Vanilla JavaScript.

$(document).ready( function() {
$('.content-item').click(function() {
        $('.content-item.active').removeClass("active");
        $(this).addClass("active");
    });
  });

.content-item {
cursor: pointer;
}

.content-item-1.active {
color: red;
}

.content-item-2.active {
color: blue;
}

.content-item-3.active {
color: green;
}

.content-item-4.active {
color: yellow;
}

.content-cousin {
display: none;
}

.content-grand-dad.content-item-1 ~ .content-cousin-1, .content-grand-dad.content-item-2 ~ .content-cousin-2, .content-grand-dad.content-item-3 ~ .content-cousin-3, .content-grand-dad.content-item-4 ~ .content-cousin-4 {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

<ul >
  
  <li >
    <p>Line 1</p>
  </li>

   <li >
    <p>Line 2</p>
  </li>


  <li >
    <p>Line 3</p>
  </li>

   <li >
    <p>Line 4</p>
  </li>

</ul>

</div>

<div >
<h3>Word 1 </h3>
</div>

<div >
<h3>Word 2 </h3>
</div>

<div >
<h3>Word 3 </h3>
</div>

<div >
<h3>Word 4 </h3>
</div>

CodePudding user response：

For my answer I replaced the numbered classes with a data attribute that holds the number.

Then on load I find the active item and show the corresponding cousin.

Then in my event handler, I simply remove an active class from the cousin, then add an active class to the appropriate cousin based on the selected data attribute.

I also have a new active class that is display block, without the need for the full list of css selectors as before.

Instead of referring to the classes, I also used nth-child to change the color of the items in the list so that way the ids can be more dynamic if needed.

$(document).ready( function() {
    //load initial cousins
    let active = $(".content-item.active").data("item");
    $(".content-cousin[data-item='"   active   "']").addClass("active");        
    
    $('.content-item').click(function(e) {
        $('.content-item.active').removeClass("active");
        $('.content-cousin.active').removeClass("active");
        $(this).addClass("active");
        $(".content-cousin[data-item='"   $(this).data("item")   "']").addClass("active");        
    });
  });

.content-item {
cursor: pointer;
}

.content-column .content-item.active:nth-child(1){
color: red;
}

.content-column .content-item.active:nth-child(2){
color: blue;
}

.content-column .content-item.active:nth-child(3){
color: green;
}

.content-column .content-item.active:nth-child(4){
color: yellow;
}

.content-cousin {
display: none;
}

.content-cousin.active {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

<ul >
  
  <li data-item="1" >
    <p>Line 1</p>
  </li>

   <li data-item="2" >
    <p>Line 2</p>
  </li>


  <li data-item="3" >
    <p>Line 3</p>
  </li>

   <li data-item="4" >
    <p>Line 4</p>
  </li>

</ul>

</div>

<div data-item="1" >
<h3>Word 1 </h3>
</div>

<div data-item="2" >
<h3>Word 2 </h3>
</div>

<div data-item="3" >
<h3>Word 3 </h3>
</div>

<div data-item="4" >
<h3>Word 4 </h3>
</div>