Код вообще не реагирует на клики, в чем может быть проблема?
var elements = document.querySelectorAll('.accordion_item');
for (var i = 0; i < elements.lenght; i++) {
elements[i].onclick = function() {
console.log(1);
for(var j = 0; j < elements.lenght; j++) {
if(elements[j].classList.contains('open') == true) {
elements[j].classList.remove('open');
elements[j].lastChild.style.height = '0';
}
}
var accordionContent = this.lastChild;
var accordionContentStyle = getComputedStyle(accordionContent);
if (parseInt(accordionContentStyle) == 0) {
accordionContent.style.height = scrollHeight + 'px';
accordionContent.classList.add('open');
} else {
accordionContent.style.height = 0;
accordionContent.classList.remove('open');
}
}
}
* {
margin: 0;
padding: 0;
}
body {
backgoround-color: #ddddd;
}
.wrapper {
margin: 30px;
max-width: 600px;
}
.accordion_item {
margin-top: 4px;
}
.accordion_name {
padding: 10px;
cursor: pointer;
position: relative;
}
.accordion_name h2 {
position: relative;
z-index: 3;
display: inline-block;
pointer-events: none;
}
.accordion_name h2:hover svg {
stroke: orange;
}
svg {
stroke: transparent;
position: absolute;
fill: #dddddd;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
transition: 0.2s;
}
svg:hover {
stroke: orange;
}
.accordion_content {
height: 0;
overflow: hidden;
}
<div class="wrapper">
<div class="accordion_item">
<div class="accordion_name">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none">
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/>
</svg>
<h2>One accordiont line</h2>
</div>
<div class="accordion_content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam.
</div>
</div>
<div class="accordion_item">
<div class="accordion_name">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none">
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/>
</svg>
<h2>One accordiont line</h2>
</div>
<div class="accordion_content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam.
</div>
</div>
<div class="accordion_item">
<div class="accordion_name">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none">
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/>
</svg>
<h2>One accordiont line</h2>
</div>
<div class="accordion_content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam.
</div>
</div>
</div>
Не lenght , а length.
Не this.lastChild , а this.lastElementChild
А дальше scrollHeight нужно как минимуму взять у какого-то элемента, но контент который вы открываете он уже равен нулю.
Если не нужна плавная анимация открытия, то достаточно значения 'auto', если нужна, тогда думайте, как вместо 'auto' подставить нужную высоту
var elements = document.querySelectorAll('.accordion_item');
for (var i = 0; i < elements.length; i++) {
elements[i].onclick = function() {
for(var j = 0; j < elements.length; j++) {
if(elements[j].classList.contains('open') == true) {
elements[j].classList.remove('open');
elements[j].lastChild.style.height = '0';
}
}
var accordionContent = this.lastElementChild;
var accordionContentStyle = getComputedStyle(accordionContent);
if (parseInt(accordionContentStyle.getPropertyValue("height")) == 0) {
accordionContent.style.height = 'auto';
accordionContent.classList.add('open');
} else {
accordionContent.style.height = 0;
accordionContent.classList.remove('open');
}
}
}
* {
margin: 0;
padding: 0;
}
body {
backgoround-color: #ddddd;
}
.wrapper {
margin: 30px;
max-width: 600px;
}
.accordion_item {
margin-top: 4px;
}
.accordion_name {
padding: 10px;
cursor: pointer;
position: relative;
}
.accordion_name h2 {
position: relative;
z-index: 3;
display: inline-block;
pointer-events: none;
}
.accordion_name h2:hover svg {
stroke: orange;
}
svg {
stroke: transparent;
position: absolute;
fill: #dddddd;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
transition: 0.2s;
}
svg:hover {
stroke: orange;
}
.accordion_content {
height: 0;
overflow: hidden;
}
<div class="wrapper">
<div class="accordion_item">
<div class="accordion_name">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none">
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/>
</svg>
<h2>One accordiont line</h2>
</div>
<div class="accordion_content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam.
</div>
</div>
<div class="accordion_item">
<div class="accordion_name">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none">
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/>
</svg>
<h2>One accordiont line</h2>
</div>
<div class="accordion_content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam.
</div>
</div>
<div class="accordion_item">
<div class="accordion_name">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none">
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/>
</svg>
<h2>One accordiont line</h2>
</div>
<div class="accordion_content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam.
</div>
</div>
</div>
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Написал анимацию выпадающего списка меню при hover на его родителя