accordion

by thewolff

HTML

<section class="accordion">
  <a href="#section1" id="section1">Section 1</a>
  <article>Content is here</article>
</section>
<section class="accordion">
  <a href="#section2" id="section2">Section 2</a>
  <article>Content is here</article>
</section>

CSS

.accordion {
  border: 1px solid grey;
}

article {
  height: 0;
  opacity: 0;
}

JavaScript

const accordions = document.querySelectorAll('.accordion')
const buttons = Array.prototype.slice.call(document.querySelectorAll('.accordion a'))

console.log('my buttons', buttons)

buttons.map((button) => {
console.log('hi', button)
	button.addEventListener('click', (event) => {
  console.log('event.path', event.path[1])
  if (event.path[1].classList)
  event.path[1].classList.add('open');
else
  event.path[1].className += ' ' + 'open';
  })
})