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

Question

<div class="set">
    <a href="javascript:void(0);" class="active">TEST <img class="" src="/active-arrow.svg">
    </a>
    <div class="content">content </div>

I want to set css for content class. if { display: block}. else { display: none;}

if tried

.set > a.active {
  color: #123399;
  font-family: 'lato-bold'; }

.content {
  display: none; }

.set > a.active .content{
    display: block;}

but not getting the proper results.

Answer 1

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>