Collapse/Expand text - when clicked on to expand, a 'required answer' error comes up.

Question

I have some accordion (collapsible texts) texts. (something like this: https://stackoverflow.com/questions/47132447/html-accordion-padding)
It is to reduce scrolling by hiding some texts and and expand only when clicked on the button.

The accordion texts are together with a select question which requires an answer.

However, when one of the buttons is clicked on to see the hidden texts, probably the click is recognised as moving to the next page without giving an answer to the question. So, the 'page error' and 'required answer' error come up and the screen is taken to the top of the page (as usually happens when you have a page error).

It would be great if anyone could help with how to solve this using collapsible texts (not tool tips)?  
Clicking to expand the texts shouldn't give an error as it is not an attempt to move to the next page without selecting the answer!

Answer 1

Setting the button type to button will prevent forms from automatically submitting.

<button type="button">My Button</button>

Comments

Thank you. This works!