HTML & SCSS and basic JS for Hide/Show answer to a question.

You could use forEach method to avoid duplicate code like this:

button.forEach((btn, index) => btn.addEventListener('click', function() { box[index].classList.toggle("text-visible"); box[index].classList.toggle("text-hide"); head[index].classList.toggle('bold-text'); }));

so foreach btn in button node list you can access btn element and its index and add click event to it and use index argument to access box and head node list elements with same index as btn which is clicked. I think it will also be better when you use querySelectorAll to use words in plural buttons, boxes, heads for naming your variables. Sorry for bad english, hope it helps.