When attempting to adjust the height property using JavaScript instead of jQuery, a challenge arises. The issue lies in the inability to reset the height back to zero after setting it to the scrollHeight of the element.
The following is the JavaScript code being used:
let isClosed = true;
var cals = document.getElementsByClassName('h-strench-box');
for (var i = 0; i < cals.length; i ++) {
cals[i].addEventListener('click', function(e) {
if (isClosed) {
this.classList.add('h-strench-box-out');
var content = this.querySelector('.h-strench-content');
content.style.height = content.scrollHeight + 'px';
isClosed = false;
} else {
if (this.classList.contains('h-strench-box-out')) {
this.classList.remove('h-strench-box-out');
// this.querySelector('.h-strench-content').style.height = '0';
// This not working
isClosed = true;
} else {
for (var j = 0; j < cals.length; j ++) {
cals[j].classList.remove('h-strench-box-out');
cals[j].querySelector('.h-strench-content').style.height = '0';
// This not working
}
this.classList.add('h-strench-box-out');
var content = this.querySelector('.h-strench-content');
content.style.height = content.scrollHeight + 'px';
}
}
});
}
CSS styles:
.h-strench-content {
height: 0;
padding: 0;
display: none;
overflow: hidden;
transition: height 0.4s ease-in;
}
.h-strench-box-out .h-strench-content {
display: block;
}
.h-strench-btn {
transition: transform 0.3s ease-out;
}
.h-strench-btn::before {
content: '\f13a';
font-family: "Font Awesome 5 Free";
font-size: 27px;
font-weight: 600;
}
An additional question is how to modify the height value(B) without using element.style (A). See the image linked below for comparison. Any assistance would be greatly appreciated!