Home/ Questions/Q 9218767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T02:56:21+00:00

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

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0