Quiero agregar un borde en el contenido de la clase de contenido de acordeón de accordion-content cuando se abre el botón de acordeón.accordion.is button.accordion.is-open . ¿Es posible a través de CSS puro?
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>Simplemente usaría un selector de hermanos basado en la clase de acordeón abierto. Es posible que desee agregar un borde transparente y una transición para evitar saltos.
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>Solución fácil, agregue una clase para abrir contenido de acordeón y agregue un borde y elimine maxHeight en su lugar, 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; }