Forum Moderators: open
One site I'm working with makes extensive use of show/hide divs for accessing supplementary information. When the page loads, most of the information is not displayed, just a "default" div with the basics. But then clicking on one of 6 link reveals the information on that particular sub-topic. It's a very user friendly page and it keeps the information tidy and not so overwhelming as it would be if it were all displayed at once. It also reduces scrolling and repeated page-load waits.
But the spiders naturally index the entire content of all the divs, and visitors can easily arrive from search engines looking for information that's not immediately visible -- because it's in a hidden div.
The show/hide divs approach seems unavoidable here, because of the back end the client is using to build their pages. If I try to break out the information into framed pages or pop-up windows, then the automated site search function breaks and the entire site needs to be re-developed.
Can anyone suggest an approach for handling the situation? How can I let the visitor know where the information they saw at the SE is hiding?
Alot of sites I've seen recently use something to the effect of
cursor: help; and border-bottom: 1px dashed #dddddd; to give the user a visual queue that the element has a tooltip associated with it, then use title="Click for more info" or similar on the element. That's what I was using for a bit, but I ended up switching to CSS :hover flyouts to present the information instead of JS. This of course doesn't persist the information on screen -- it is only presented on hover, which is probably not what you are wanting to do.
Perhaps you could make a 'more info' panel for the links with a description at the top like "Click any of following links to see more information on that topic:"
Jordan