title: Drupal 8 - JQuery-ui implementing accordion or tabs in custom module
body: <p>In Drupal 8 how would an accordion or tab element be implemented in a custom module... for example:</p>
  
  <ol>
  <li><p>A custom module has been set up (including folder structure)... the content function in the module is outputting the following html in the render array (basically pushing the HTML to create the accordion element on to an array which will be appended to the render array, through the use of 'array('#type'=>'markup',"#markup'=>$html)' etc and the code does appear in the HTML page ):</p>
  
  <pre><code>        array_push($strn,"&lt;div id=".chr(22)."accordion".chr(22)."&gt;");
              array_push($strn,"&lt;h3&gt;Section 1&lt;/h3&gt;");
                  array_push($strn,"&lt;div&gt;");
                      array_push($strn,"&lt;p&gt;");
                          array_push($strn,"data");
                      array_push($strn,"&lt;/p&gt;");
                  array_push($strn,"&lt;/div&gt;");
              array_push($strn,"&lt;h3&gt;Section 2&lt;/h3&gt;");
                  array_push($strn,"&lt;div&gt;");
                      array_push($strn,"&lt;p&gt;");
                          array_push($strn,"data");
                      array_push($strn,"&lt;/p&gt;");
                  array_push($strn,"&lt;/div&gt;");
              array_push($strn,"&lt;h3&gt;Section 3&lt;/h3&gt;");
                  array_push($strn,"&lt;div&gt;");
                      array_push($strn,"&lt;p&gt;");
                          array_push($strn,"data");
                      array_push($strn,"&lt;/p&gt;");
                  array_push($strn,"&lt;/div&gt;");
          array_push($strn,"&lt;/div&gt;");
  </code></pre></li>
  <li><p>The module works itself does work and render HTML</p></li>
  <li><p>Additional javascript file has been loaded via &lt;>.libraries.yml and contains the following code:</p>
  
  <pre><code>(function($) {
  $(document).ready(function() {
      $("#accordion").accordion();
  });})(jQuery);
  </code></pre></li>
  </ol>
  
  <p>... it loads the javascript file as I checked the page's html and the file is there and also added the following line "window.alert("LOADED BESPOKE JS SCRIPT!");" which is successfully executed</p>
  
  <p>3A) For clarities I have added the following code to the &lt;>.libraries.yml file:</p>
  
  <pre><code>dataAnalytics.jqui:
    version: VERSION
    header: true
    css:
      theme:
        css/test.css: {}
        css/jquery-ui.css: {}
    js:
      libraries/js/bespokescript1.js: {}
    dependencies:
      - core/jquery
      - core/jquery.ui.accordion
  </code></pre>
  
  <p>4) Even trying the javascript as the following (Note: The alert command is executed correctly, but the <code>$("#accordian").accordion();</code> has no effect although the <code>alert</code> command does run):</p>
  
  <pre><code>$(function ($) {
  //add drupal 7 code
  Drupal.behaviors.myfunction = {
      attach: function(context, settings) {
      //end drupal calls
  
      //some jquery goodness here...
          $( "#accordion" ).accordion( {
              header: "li",
              collapsible: true
          } );
  
          alert("search_results.js properly loaded");
      }
  }
  });
  </code></pre>
  
  <p>The issue:  The accordion element will not render as an accordion, just as standard HTML text e.g. the JQuery bit is not being executed</p>