Hiding JQuery Accordion Content From View

Question

I am trying to achieve the following using the JQuery Accordion code:

Make sure content hidden within the accordion is not displayed (i.e. flashes up briefly) whilst the page is loading. I only want the user to see this content if they expand the accordion but in some browsers I can see this content whilst the page is loading.
Display the accordion H1 tab (e.g. Accordion Test) but none of the content hidden beneath it if the user has Javascript disabled.

To give you an example this is the sort of thing I am trying to emulate:

http://www.outdoorgb.com/c/inflatable_boats_kayaks/

Try clicking on the Read More button, further info is displayed. Now try disabling Javascript. You will note that clicking the button does nothing and the further info is not displayed. You might say in response to this that it is not a good thing for this to happen as Google may not crawl that content etc. However, running this URL through Lynx it appears to read the content fine. Does anyone think this could be a problem?

Anyway, this is the code that I am looking to adapt to satisfy my points above:

 <!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8" />
  <title>Accordion Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://www.jqueryui.com/resources/demos/style.css" />

  <script>
  $(function() {
    $( "#accordion" ).accordion({
      collapsible: true,
      active: false,
      heightStyle: "content"
    });
  });
  </script>

</head>

<body>

<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>

</body>
</html>

Any help that any of you experts out there can provide would be gratefully appreciated.

Many thanks in advance

Jon

==============================================

Update

==============================================

Thanks to Pete's help I have solved the first of these issues. Anyone have any idea how to solve hiding the content if javascript is disabled? Current code looks like this:

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8" />
  <title>Accordion Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://www.jqueryui.com/resources/demos/style.css" />

 <script>

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

  </script>


</head>

<body>

<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>

</body>
</html>

Ok. Thanks for your help guys. I have fixed the first point (i.e. i can't see the contents of the accordion flash up on load). Does anyone now know if it is possible to prevent the content displaying should javascript be disabled? — John Alderton, Jan 31 '13 at 16:16

score 1 · Answer 1 · edited May 23 '17 at 12:16

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/

Thanks Dylan, that allays my fears about hiding Javascript content. — John Alderton, Jan 31 '13 at 15:22

Pete · Accepted Answer · 2013-01-31T16:25:18.910

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

Thanks Pete. I'm embarrassed to say it but my newbie skills have let me down and I can't work out how this solution would look within my code. Have tried several things but with no success. Any help would be really appreciated. — John Alderton, Jan 31 '13 at 15:26
Thanks Pete. That solved one of my issues. Any idea about how to hide the content completely (i.e. clicking on the accordion does not drop down the content) if javascript is disabled? I don't want it to "gracefully" display as it's a nightmare to get right across browser with CSS and always looks ugly in my opinion. I have updated my current code above. — John Alderton, Jan 31 '13 at 16:20
That's great thanks Pete. Works like a charm. The content doesn't need to be seen in order for the user to do what they need to do on the page. In fact it could get in the way, hence wanting the accordion to be minimised etc. The desired affect is to have the info there if the user wants it but also to help with SEO. Does anyone see any problem with the final solution in terms of Google crawling the content? @dylanvalade — John Alderton, Jan 31 '13 at 16:56

score 0 · Answer 3 · answered Jan 31 '13 at 14:36

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

Thanks Isotrope. I can apply the display:none to my div but can't work out how my event code should look or where it should be placed within the code. Apologies for newbie questions, trying to self-learn is not proving easy. — John Alderton, Jan 31 '13 at 15:24

Hiding JQuery Accordion Content From View

3 Answers3