JS code om FAQs te openen onclick functioneer niet?

Hallo,
deze is mij html code:

<div class="faqs-container">
<h2>Frequently asked Questions</h2>
<div class="accordion">
<h3>How do I purchace</h3>
<div class="open active">+</div>
<div class="close">-</div>
</div>
<div class="panel">
<h6> how are you today what are you doing were wil you go today do you like to go to picnic</h6>
</div>
<div class="accordion">
<h3>How are you today</h3>
<div class="open active">+</div>
<div class="close">-</div>
</div>
<div class="panel">
<h6> how are you today what are you doing were wil you go today do you like to go to picnic</h6>
</div>
<div class="accordion">
<h3>where is my</h3>
<div class="open active">+</div>
<div class="close">-</div>
</div>
<div class="panel">
<h6> how are you today what are you doing were wil you go today do you like to go to picnic</h6>
</div>
</div>

deze is mij JS code:

<script>

	var acc = document.getElementsByClassName('accordion');
	 var i;
	 var len=acc.lenght;
	for (i=0; i<len; i++) {
	acc[i] .addEventListener ('click', function () {
		
	this.classList.toggle('active')	;
		var panel= this.nextElementSibling ;
		if (panel.style.maxHeight) {
			panel.style.maxHeight=null;
			 
		} else    {
			panel.style.maxHeight = panel.scrollHeight + 'px'
		
				
		}		
	} );
		
	} 

ik zet voor zekerheid de CSS code bij:

.faqs-container{
width:40%;
margin:0 auto;

}

.faqs-container h2{
font-size:28px;
padding:4px 32px;
color:blue;
}

.accordion {
display:flex;
background-color:#03071e;
color:white;
align-items:center;
position:relative;
cursor:pointer;
}

.accordion h3 {
font-size:20px;
padding:0 32px;
margin:0;
font-weight:normal;
color:blue;
}

.accordion .open,
.accordion .close {
right:0;
padding:0 32px;
font-size:22px;
font-weight:bold;
width:30px;
position:absolute;
opacity:0;
}
.accordion .open.active,
.accordion .close.active {
opacity:1;

}

.panel{
padding: 0 32px;
line-height:2;
background-color:#fdfffc;
overflow:hidden;
transition:all 0.5s ease-in;
max-height:0px;
}

.panel.active{
max-height:400px;

}`
ik ben 2 dagen bezig geweest om deze JS code samen stellen via W3school en andere bronnen maar heeft mij niet gelukt om de fout van mij JS code uitvinden.
ik heb heleboel geprobeerd maar zonder resultaat.
ik zie zelf geen fout maar er moet een fout zijn .
ik heb var accordion var i var len en var panel gemaakt. ik heb add eventlistener toegevoegd en ik heb next elementsibling toegevoegd voor de var panel(content) maar toch klopt niet.
kan iemand corregeren mij fout!
dank u wel

De pagina waar ik hulp bij nodig heb: [log in om de link te zien]