Hide Jquery Accordion While Loading

Hide jQuery Accordion while loading

I do this first thing with all my sites: Right after the body tag, put a script tag with this javascript:

jQuery('body').addClass('js');

This gives you a style hook for any elements that will look different in some way when Javascript enabled, and it happens immediately.

There are good solutions to the rest of your problems in the other answers. You'll just need two "base" styles instead of one:

#navigation ul li { /*open styles for no javascript*/ }
body.js #navigation ul li { /*closed styles for pre dom.ready*/ }

... and then re-open before applying the accordion on dom.ready.

EDIT: If you're loading jQuery at the end of the page (or aren't using jQuery), you can use this straight javascript version:

<script type="text/javascript">
    var b = document.getElementsByTagName('body')[0];
    b.className+=b.className?' js':'js';
</script>

Hiding divs on page load with jQuery UI Accordion widget

The reason that it's not working is because you are trying to hide the elements before they exist. It would work if you put the code at the end of the page, but even then you are not sure that they are not visible for a split second.

Use CSS to hide them instead, then they are hidden already when they come into existance:

<style type="text/css">

#accordion div, #accordion2 div { display: none; }

</style>

jQuery UI Accordion - keeping elements closed while page loads

Consider the following example based on the Demo: https://jqueryui.com/accordion/

$(function() {
  $("#accordion").accordion({
    active: false,
    heightStyle: "Content",
    autoheight: false,
    alwaysOpen: false,
    collapsible: true
  }).show();
});

#accordion {
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 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. Curabitur malesuada. Vestibulum
      a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
      Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
      Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
      nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
      Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
    </p>
    <p>
      Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
  </div>
</div>

jQuery UI Accordion (hiding all by default)

This code should accomplish this

$( ".selector" ).accordion({ active: false });

how to hide a jquery accordion block

Problem is .ui-accordion-header only hides the header and not the div itself. Best bet will be to hide each element explicitly:

$('#myAccord').accordion().children('b:eq(index), div:eq(index)').hide();

How to hide Accordions on page load?

Give them different identifiers, and use a selector to select the one you want to hide and change its visible property to hidden.

jquery hide the active accordion content

You can do,

$("h3").click(function() {
  if ($(".accordion-content").is(":visible")) {
    $(".accordion-content").not($(this).next()).slideUp(600);
    $("span.plusminus").text("+");

  }
  $(this).next(".accordion-content").slideToggle(600);
  $(this).find("span.plusminus").text("-");
});

Fiddle

1. Use SlideToggle() for the current cliked element.
2. USe slideUp() for all the elements except the current one.

Fix for Icon

$("h3").click(function() {
  var icon = $(this).find("span.plusminus");
  $(".accordion-content").not($(this).next()).slideUp(600);
  $("span.plusminus").not(icon).text("+");
  $(this).next(".accordion-content").slideToggle(function() {
    if ($(this).is(":visible")) {
      icon.text("-");
    } else {
      icon.text("+");
    }
  });
});

Edited Fiddle

Hiding JQuery Accordion Content From View

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

How to hide an accordion on page load and show only on click on an element

do not put display:none in inline style. Do it through your css, put it on #mydiv and then have it revealed with onclick function

#accordion{
display:none;
}

You can also add it to your <head> section if you are not using style-sheet.

---

Related Topics