How to manage display block and display none on basis of parent Class is link [duplicate]

Question

You are looking for adjacent sibling combinator +.

a.active + .content {
   display: block;
}

The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
source: CSS selectors – CSS: Cascading Style Sheets | MDN

Example

const toggleActive = (btn) => {
console.log(btn.classList.contains("active"));
  btn.classList.contains("active")
    ? btn.classList.remove("active")
    : btn.classList.add("active")
}

.content {
  display: none; 
}
a.active + .content{
  display: block;
}

<div class="set">
  <a class="active" onClick="toggleActive(this)">TEST</a>
  <div class="content">content</div>
</div>

Example

Leave a Comment Cancel Reply