I have a page where the general structure is
<a href="#section1">section 1</a>
<a href="#section2">section 2</a>
<a href="#section3">section 3</a>
<a href="#section4">section 4</a>
<section id="section1">
<h1>section 1</h1>
<p>some content</p>
</section>
<section id="section2">
<h1>section 2</h1>
<p>some content</p>
</section>
<section id="section3">
<h1>section 3</h1>
<p>some content</p>
</section>
<section id="section4">
<h1>section 4</h1>
<p>some content</p>
</section>
(there are about 10 sections all with quite a bit more content and have missed out alot of the surrounding html but this is the basic structure).
All the content is on one page and clearly seperated semantically and the page relies on javascript to choose which sections to hide / show.
I am wondering whether from an SEO perspective it would be good to use #! links and implement http://code.google.com/web/ajaxcrawling/ returning only the content for each section? Would this mean that the site no longer functioned without javascript? If the '!' was added in using javascript would google pick this up or would they use the raw html? Or will google index the content on the page correctly (ie ignore the javascript completely)?