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

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>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top