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 >Show Solution</button>
<div >
<p>
kmax, kmin = k.max(), k.min()<br />
k_new = (k - kmin)/(kmax - kmin)
</p>
</div>

CodePudding user response：

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 >Show Solution</button>
<div >
  <p>
    kmax, kmin = k.max(), k.min()<br /> k_new = (k - kmin)/(kmax - kmin)
  </p>
</div>

CodePudding user response：

Easy solution, add a class for open accordion-content and add border on it and remove maxHeight instead use js.

setTimeout(function() {

  const accordionBtns = document.querySelectorAll(".accordion");
  accordionBtns.forEach((accordion) => {
    accordion.onclick = function() {
      var toggle = this.classList.toggle("is-open");
      let content = this.nextElementSibling;

      if (toggle) {
        content.classList.add("open");
        } else {
        //if the accordion is currently closed
      content.classList.remove("open");
      }
    };
  });

}, 200);


.accordion-content.open {
  max-height: none;
  border: 1px solid #333;
}

CodePudding user response：

simple as that

.accordion-content {
  border: 1px solid black;
}