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)