Is content inside a zero height element bad for SEO?

Question

I have a website about math problems and its solution. At first, I only display the problems, empty div for solution later, and button that will use AJAX to display solution when clicked.

But, since it reduces my content length, I choose to display the non rendered solution at that zero height div. I don't know if it is good though. And the button is used to retrieve the rendered solution, and change the non rendered one with it.

My question is, is that bad for SEO? If yes, what is the better method for that?

Answer 1

I make an effort to have all content visible at some point with normal usage, just wanted to disclose my bias first.

Use cases for content not visible on a page at some point with normal usage.

• Slide carousel, (where images and text are presented in an animated manner)
• Skip to main content, (where a hidden link is used for the visually impaired which is displayed when a visitor presses the tab key to focus on the first link of the page) ... being used by major sites such as youtube.

• Menus that expand

• Et la.

These use cases have in common that the information is eventually going to become visible. In a CSS zero height div, the reveal may be using javascript to activate the

element {height:0px} # hidden on load
element:onfocus {height:300px} # not hidden after 

interaction of some type

---

I believe that using a link, button, or javascript to expand an answer would be a reasoned use case. It would be seen by more people than the skip navigation button.

Note this portion of the page for educators and QA pages has been recently updated by Google if you are looking at Schema: https://developers.google.com/search/docs/appearance/structured-data/qapage#content-guidelines

Here is Google's explanation on the content guidelines changes to Danny Goodwin: https://searchengineland.com/google-education-qa-content-guidelines-387545