Change color after revealing text in javascript-CodePudding

I want to reach some specific results with my code but I can't find what I am doing wrong. It would be very helpful if you could correct me.

So I have made these rows that you can click and open. The orange rows open and the title becomes blue. I want the opposite thing for the blue rows. I mean I want the row to open and the title to become orange.

Thanks in advance. This is my first post here :)

Here is my code

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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight   "px";
    }
  });
}

var acc = document.getElementsByClassName("accordion2");
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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight   "px";
    }
  });
}

.accordion {
  font-family: default;
  cursor: pointer;
  background-color: #F7A600;
  color: #ffffff;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 26px;
  transition: 0.4s;
  font-family: 'Ubuntu';
}

.active,
.accordion:hover {
  background-color: #ffffff;
  color: #F7A600;
}

.accordion:after {
  content: '\23F7';
  font-weight: bold;
  float: float;
  margin-left: 15px;
}

.active:after,
.accordion {
  content: "\23F6";
}

.accordion2 {
  font-family: default;
  cursor: pointer;
  background-color: #009ACB;
  color: #ffffff;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 26px;
  transition: 0.4s;
  font-family: 'Ubuntu';
}

.active,
.accordion2:hover {
  background-color: #ffffff;
  color: #009ACB;
}

.accordion2:after {
  content: '\23F7';
  font-weight: bold;
  float: float;
  margin-left: 5px;
}

.active:after,
.accordion2 {
  content: "\23F6";
}

.panel-1 {
  padding: 0 18px;
  background-color: white;
  color: #424241;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 18px;
  font-family: 'Ubuntu';
}

<button >Γενικές Πληροφορίες</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Αίτια</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >ΔΕΠ-Υ στα παιδιά</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >ΔΕΠ-Υ στους ενήλικες</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Συννοσηρότητα</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Διάγνωση</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Φαρμακευτική αγωγή</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Ψυχοθεραπεία</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Coaching για τη ΔΕΠ-Υ</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

CodePudding user response：

You need to add

.accordion2.active {
  color: #F7A600;
}

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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight   "px";
    }
  });
}

var acc = document.getElementsByClassName("accordion2");
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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight   "px";
    }
  });
}

.accordion {
  font-family: default;
  cursor: pointer;
  background-color: #F7A600;
  color: #ffffff;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 26px;
  transition: 0.4s;
  font-family: 'Ubuntu';
}

.accordion2.active,
.accordion:hover {
  background-color: #ffffff;
  color: #F7A600;
}

.accordion:after {
  content: '\23F7';
  font-weight: bold;
  float: float;
  margin-left: 15px;
}

.active:after,
.accordion {
  content: "\23F6";
}

.accordion2 {
  font-family: default;
  cursor: pointer;
  background-color: #009ACB;
  color: #ffffff;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 26px;
  transition: 0.4s;
  font-family: 'Ubuntu';
}

.active,
.accordion2:hover {
  background-color: #ffffff;
  color: #009ACB;
}

.accordion2:after {
  content: '\23F7';
  font-weight: bold;
  float: float;
  margin-left: 5px;
}

.active:after,
.accordion2 {
  content: "\23F6";
}

.panel-1 {
  padding: 0 18px;
  background-color: white;
  color: #424241;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 18px;
  font-family: 'Ubuntu';
}

<button >Γενικές Πληροφορίες</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Αίτια</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >ΔΕΠ-Υ στα παιδιά</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >ΔΕΠ-Υ στους ενήλικες</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Συννοσηρότητα</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Διάγνωση</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Φαρμακευτική αγωγή</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Ψυχοθεραπεία</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button >Coaching για τη ΔΕΠ-Υ</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

CodePudding user response：

First you defined style like this:

.active, .accordion:hover {
  background-color: #ffffff;
  color: #F7A600;
}

A little later you wrote this:

.active, .accordion2:hover {
  background-color: #ffffff;
  color: #009ACB;
}

Basically you are styling the active class twice and the 2nd one overwrites the first one. You can do this instead to fix it:

.active, .accordion:hover, .accordion2:hover {
  background-color: #ffffff;
}

.accordion:hover, .accordion2.active {
  color: #F7A600;
}

.accordion2:hover, .accordion.active  {
  color: #009ACB;
}

In case you do not fully understand the different css selectors I would recommend to read about them here: https://www.w3schools.com/cssref/css_selectors.asp