Check If Jquery Ui is Rendered?

Question

I am using the jquery ui (tabs and accordion). When the page loads I see all the content as the tabs/accordion code has not rendered.

I would like to hide the content to the tabs and accordion plugins have bound itself to everything.

I am however not sure how to check this?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <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>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</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.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>
 
<script>
$( "#accordion" ).accordion();
</script>
 
</body>
</html>

Don't show any content till accordion plugin has rendered into a proper accordion.

Answer 1

Worst case you could hide the accordion parent with css

#accordion { display: none}

And chain show() to the plugin initialization:

$( "#accordion" ).show().accordion();

Answer 2

I had the same issue with the jQueryUI tabs and solved it this way. In the body, right after defining the tabs I hide them, as shown here.

<UL ID=TabList STYLE='list-style-type: none'>
  <LI><A HREF='#tabs-1'>Page 1 </A></LI>
  <LI><A HREF='#tabs-2'>Page 2</A></LI>
  <LI><A HREF='#tabs-3'>Page 3</A></LI>
</UL>
<SCRIPT>
/* Hide the above section as soon as it's created, otherwise it displays briefly as a regular bulleted list before being converted into tabs. This only works here, not in the head. The section is shown after the tabs are created. */
  $('#TabList').hide();
</SCRIPT>

Then I execute the following line of code at the top of my script section in the head, and it runs before the document.ready function. I'm not sure why, but that works better to suppress the brief display of the unconverted UL than putting this in document.ready before the line that shows them.

$(function() {$('#tabs').tabs()});

Then in the document.ready function I show them.

$('#TabList').show();

Check If Jquery Ui is Rendered?

Question

2 answers

solution1
0 2020-08-31 23:29:07

solution2
0 2020-09-01 02:14:52

Check If Jquery Ui is Rendered?

Question

2 answers

solution1 0 2020-08-31 23:29:07

solution2 0 2020-09-01 02:14:52

solution1
0 2020-08-31 23:29:07

solution2
0 2020-09-01 02:14:52