Home How can I style an element when its previous sibling has a particular class?

Questions

How can I style an element when its previous sibling has a particular class?

January 3, 2022

I want to add border in content of accordion accordion-content class when accordion button.accordion.is-open is opened. Is it possible via pure CSS?

setTimeout(function(){
    
const accordionBtns = document.querySelectorAll(".accordion");

accordionBtns.forEach((accordion) => {
  accordion.onclick = function () {
    this.classList.toggle("is-open");

    let content = this.nextElementSibling;

    if (content.style.maxHeight) {
      //this is if the accordion is open
      content.style.maxHeight = null;
    } else {
      //if the accordion is currently closed
      content.style.maxHeight = content.scrollHeight + "px";
    }
  };
});

}, 200);

button.accordion {
  width: 100%;
  background-color: whitesmoke;
  border: 1px solid #333;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

button.accordion:after {
  font-family: "Font Awesome 5 Free";
  content: "\f067";
  font-size: 18px;
  float: right;
  font-weight: 900;
}

button.accordion.is-open:after {
  content: "\f068";
  font-weight: 900;
}

button.accordion:hover,
button.accordion.is-open {
  background-color: #ddd;
}

.accordion-content {
  background-color: white;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

<button class="accordion">Show Solution</button>
<div class="accordion-content">
<p>
kmax, kmin = k.max(), k.min()<br />
k_new = (k - kmin)/(kmax - kmin)
</p>
</div>

>Solution :

You’d just use a sibling selector based on the open accordion class. You may want to add a transparent border and transition to prevent jumping.

setTimeout(function() {

  const accordionBtns = document.querySelectorAll(".accordion");

  accordionBtns.forEach((accordion) => {
    accordion.onclick = function() {
      this.classList.toggle("is-open");

      let content = this.nextElementSibling;

      if (content.style.maxHeight) {
        //this is if the accordion is open
        content.style.maxHeight = null;
      } else {
        //if the accordion is currently closed
        content.style.maxHeight = content.scrollHeight + "px";
      }
    };
  });

}, 200);

button.accordion {
  width: 100%;
  background-color: whitesmoke;
  border: 1px solid #333;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

button.accordion:after {
  font-family: "Font Awesome 5 Free";
  content: "\f067";
  font-size: 18px;
  float: right;
  font-weight: 900;
}

button.accordion.is-open:after {
  content: "\f068";
  font-weight: 900;
}

button.accordion:hover,
button.accordion.is-open {
  background-color: #ddd;
}

.accordion-content {
  background-color: white;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
  border: 3px solid transparent; /* prevents position shift */
  transition: border 0.3s; /* softens border change */
}

.accordion.is-open + .accordion-content { /* selects following sibling element */
  border: 3px solid pink;
}

<button class="accordion">Show Solution</button>
<div class="accordion-content">
  <p>
    kmax, kmin = k.max(), k.min()<br /> k_new = (k - kmin)/(kmax - kmin)
  </p>
</div>