score:1

Accepted answer

You can try something like

<script language="text/javascript"> document.write('<div id="hideAccordion" style="display:none">'); </script>

<div id="accordion">
  <h1>Accordion Test</h1>
  <div>
  <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p>
  </div>
</div>

<script language="text/javascript"> document.write('</div>'); </script>

and then on your document ready just call $('#hideAccordion').show() or better still if there is a function that gets called after your accordion has loaded call this in it

something like

 $(document).ready(function() {
    $( "#accordion" ).accordion({
      collapsible: true,
      active: false,
      heightStyle: "content"
    });
    $('#hideAccordion').show();
  });

EDIT

Sorry, I have just read your question again and as you are not bothered about showing the content when the javascript is disabled you can simply use the following styles in your style sheet:

#accordion div {display:none;}

Once the accordion loads it should then work as normal without any of the content showing whilst the page is loading. One point I would make about this is that it isn't very accessible but it just depends on if you are bothered about coding to w3c standards, and some search engines look for large blocks of text that is display:none and can lower your search ranking if you have a lot of text hidden like this

score:0

The example you provide is simply toggling a class. The content is actually there all along (look inside .side, you'll find .readmore_con).

.readmore_con is simply set to

display: none;

Upon clicking the "Read More' button, it adds a .readmore_open class to the .readmore_con div. The CSS for .readmore_open? ...You guessed it:

display: block;

If you really want to use accordion for this toggling, you can simply define an initial state of display: none; to your "more" content, and then toggle that during your accordion's .activate event: http://api.jqueryui.com/accordion/#event-activate

score:1

Google crawls my content when it's included in the DOM when the page loads even if the content is not displayed to the user 100% of the time (e.g. in accordions or rollover tooltips).

I don't see any problem with the "read more" text being unavailable if the person doesn't have Javascript enabled because the text isn't critical to use the page. I have never heard from a single client or a report from their customers that an issue existed from disabled JS.

Here is some useful reading on disabled JS browsing Browser statistics on JavaScript disabled

If JS disabling is a real concern for your user group then another option is using CSS to handle your accordion with something like this http://www.hongkiat.com/blog/css-content-accordion/


Related Query

More Query from same tag