Need help combining class, active and before selectors

I’m trying to make an accordian menu (I’m a massive noob at HTML, CSS and JS as you can probably tell).

My main goal is to make the “+ Work” and “+ Social” buttons change to “- Work” and “- Social” respectively when active.

I tried using the ::before selector and I just can’t get it to work.

When I write .active::before {content: "- "; } it appends “- ” to the links within the accordian panel which I don’t want.

Please help!!

P.S I’m trying to copy this into a cargo website and for whatever reason it’s really temperamental so if anyone has advice/experience with this please let me know!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

a {
  color: rgba(0, 0, 0, 0.6);
  font-size: 1rem;
  font-weight: 400;
  font-family: "Neue Haas Grotesk", Icons;
  text-decoration: none;
}

a:visited {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

a:hover {
  color: #225a25;
  text-decoration: none;
}


/*Accordian menu buttons*/
.accordion {
  background-color: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  padding: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1rem;
  font-weight: 400;
  font-family: "Neue Haas Grotesk", Icons;
  text-decoration: none;
  transition: 0.2s;
}

/*Change button prefix from + to - upon clicking*/
.accordion::before {
  content: "+ ";
}

.accordian:active::before {
  content: "- ";
}
.active {
  text-decoration: underline;
}



.accordion:hover {
  color: #225a25; 
}


/*Accodian panel style*/
.panel {
  padding: 2px 16px 16px;
  display: none;
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}

</style>

<button class="accordion">&nbsp;Work</button>
<div class="panel" style="display: none;">
  <a href="Freelance-Work" rel="history">︎ Freelance</a><br>
  <a href="university-work" rel="history" data-tags="university-work">︎ University</a><br>
  <a href="Personal-projects" rel="history">︎ Personal</a>
</div>

<button class="accordion">&nbsp;Social</button>
<div class="panel" style="display: none;">
  <a href="https://www.linkedin.com/in/andy-connacher-2a7867a8/" target="_blank">︎ LinkedIn</a><br>
  <a href="https://www.instagram.com/andyconnach3r/" target="_blank">︎ Instagram</a><br>
  <a href="https://www.upwork.com/freelancers/~019da1b6edbddef1f1" target="_blank">︎ Upwork</a>


</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

Answer

To select the active class you use . not :

Change

.accordian:active::before {
  content: "- ";
}

.accordion.active::before {
  content: "- ";
}

Advertisement

Answer