How to correctly implement the display:none block so that it is correctly perceived by Google?

Question

HTML

The FAQ section of the site is implemented using jQuery. When you click on the question (span with the corresponding class), the block opens, which was previously with the styles { display: none; visible:hidden}.
I know that the robot reads html and Yandex indexes the page well. But Google is not entirely correct: even when searching on Google for a specific offer, the site does not appear in the search results. Only if you enclose the text in quotes, but even in this case, Google shows the Description tag in the text of the snippet, and not the corresponding piece of page text. More interested in not even the question of being in the top, but the display of text in the snippet.
Questions:
1) Is the reason why the text for the snippet is taken from the Description because the desired text is not displayed?
2) How do you implement such blocks on the site and how are they indexed by search engines?

Answer 1

hang styles on onload display: none; visible: hidden
And display by default. So people without JS will see this block and search engines will not be distracted by the fact that the block is hidden

Answer 2

Is the reason why the text for the snippet is taken from the Description because the desired text is not being displayed?

PS takes the most relevant piece of text from the page. Work on the text. PS have long learned to read and zhs, and flash and images are already recognized, the text on them and so on. So display:none is definitely not a problem for them.
The snippet is generated once, one page cannot have several of them. I can be wrong, because I haven’t climbed into SEO for a year and didn’t update my knowledge, at 15 it was exactly like that.