Responsive FAQ accordion frontend pattern made with vanilla JS.

I've made FAQ accordions before but this time around I used the interactive content tags <details><summary>. They were very useful and cut down my javascript by a lot.

Furthermore, I did my best to create the layout without using absolute positioning but alas I could not. I had a difficult time finding the best way to layout and style the single box icon that was "floating" on top of the other image. In the end I needed to use media queries to properly layout the box icon. I feel there were better ways to handle this project but I coded myself into a corner with how I layed out my HTML.

It was still a great learning experience. I also used the HTML <picture><source> tag which allowed me to use a media="(min-width: 768px)" to display the image on screens bigger than 768px. That was something I did not know we could do.