Vanilla Js Css Html

Community feedback

• 

  Fury•945

  @ashiqfuryPosted over 3 years ago

  Close all accordions before you open the clicked one.

  let acc = document.getElementsByClassName('accordion');
  let i;
  
  for (i = 0; i < acc.length; i++) {
  	acc[i].addEventListener('click', function () {
  		for (let j = 0; j < acc.length; j++) {
  			acc[j].classList.remove('active');
  			acc[j].nextElementSibling.style.display = 'none';
  		}
  		this.classList.add('active');
  
  		// toggle btw hiding and showing
  		let panel = this.nextElementSibling;
  		if (panel.style.display === 'block') {
  			panel.style.display = 'none';
  		} else {
  			panel.style.display = 'block';
  		}
  	});
  }
  

  This will solve the issue. Thanks.

  Marked as helpful

  1
• 

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  One thing that really helped me with this one was the use of the details and summary HTML elements. This way we can avoid using JS altogether! These have much of the functionality baked in and can be styled with a little bit CSS work.

  This also has the advantage of including keyboard functionality and allow the key elements to be focusable automatically. It should also address other issues you have with overflow at the moment. You can add CSS animations to make it look nice too!

  Cheers Dave

  Marked as helpful

  0
• 

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  Hi @EdgarBadillo, great work on the challenge. To answer your question, you can use javascript to track the open item.

  Marked as helpful

  0

  ---

  

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  @Fury is right, you can close all panels before you open clicked one.

  You can also achieve the same behaviour using CSS, I normally use radio button states to achieve this. This may be a little bit complicated, you may wanna check out pseudo selectors.

  input[type=radio]::checked { 
   // your code here...
  }
  

  Btw, I created a PR on your repository with the above suggestion(JS) hope you find that useful.

  Happy coding.

  1