This question already has an answer here:
- Google SEO and hidden elements 6 answers
I know similar questions have been asked a million times, but I have a really specific question regarding SEO and CSS display:none. My understanding is that, from an SEO point of view, it's acceptable to hide elements with display:none, as long as you're not trying to be sneaky and there's something that actually shows the element e.g. JavaScript / jQuery. What if my script doesn't specifically show these elements though? What I mean is say I had the following:
<a class="pin" id="cont1"></a>
<a class="pin" id="cont2"></a>
<div class="container" id="container1">
<p>Some text</p>
</div>
<div class="container" id="container2">
<p>Some more text</p>
</div>
The container divs are display:none and clicking on the pin anchors shows the relevant div i.e. pin "cont1" shows "container1" and "cont2" shows "container2" etc. However the script that does this doesn't reference a specific div. Instead it substrings the number from the anchor id to know which div to show i.e.
$('.pin').each(function () {
$(this).click(function () {
var contId = $(this).attr('id').substr($(this).attr('id').length - 1);
var container = document.getElementById('container' + contId);
if ($(container).css('display') == 'none') {
$(container).fadeIn();
} else {
$(container).fadeOut();
}
})
});
Basically, the elements to show/hide are worked out in the script and the actual div id's are not referenced directly. Do you think this approach would be penalized by Google? Would this get picked up as hidden content which is never shown? (even though it actually is)
No. Google has changed a lot since the days when hiding content with CSS/JS could dupe them. As long as the content you are serving, visible or no, is not spammy, or useless links, or nonsense, you are perfectly fine hiding things as and when you need to. Afterall, if the content is on the page Google can read it so the only disservice you can do yourself is pointless content.