How does a collapsed section affect on page SEO?

[stephanwb]

A client recently asked me whether a tabbed collapsed section of text that is expanded (i.e. revealed) when clicked, is an OK thing to do without negatively effecting SEO.

I told him that for starters, he may want to rethink why he would want to hide the text in the first place (this is not an FAQ type scenario). The reason has to do with the aesthetic of the page.

Anyway, aesthetic aside, any thoughts on whether a collapsed (hidden from view) negatively affects on-page SEO?

Thanks. 
Stephan

[TheeDigital]

As long as the search engine can read all the text, I see no issues.  Modern designers put text in multiple tabs or partially hidden until expanded all the time these to create a better user experience.  It is generally only hidden from the user using css and is fully visible in the code.

[MichaelC-15022]

Hi Stephan,

Presuming the expand/collapse thing is done properly, it should be golden.  You'll find a lot of sites use this approach when they have multiple pages of content, e.g. a product page with specifications, reviews, technical details, etc.

I do this on my travel website.  A great way to test to see if the initially-collapsed content is being seen and indexed by Google is to take a block of text from the collapsed section and search for it in double-quotes.

Here's an example:  search for "At the Bora Bora Pearl Beach Resort you can discover the sparkling magic of the lagoon".  You'll find my site there at #3 (Visual Itineraries), along with the other 1000 websites who've also copied the resort's description straight from the resort's website (yeah, I really shouldn't do this).  So much for Google's duplicate content detection when it comes to text chunks...BUT I DIGRESS.  That content you see is on the More Info tab.

Now, on to what "done properly" means:

• each tab should be in a separate div
• assign all divs a class which has style="display:none;" EXCEPT the currently selected tab
• have onclick handlers for the tabs that set all of the divs' classes to the display:none class, and then set the newly selected tab's div class to one with display:block or display:inline

And not done properly would mean something like changing the text of a div with Javascript onclick()....because Google won't see that text in the Javascript.  It's got to be in the HTML.

That's about it.  Not so tricky, really.  And works well both for usability (no roundtrip to the server, not even an Ajax fetch!) and for SEO (lotsa yummy content on a single page for Panda).