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>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>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;
}