JavaScript loading but not being applied in Drupal 8 theme I'm using this javascript to create a 'zaccordion' on my Drupal 8 site. However, it's not working. My 'slideshow' just appears as a bulleted list of images.

Here's what I've got so far:

A block on my page with the following content:

&lt;ul id="slideshow"&gt;
&lt;li&gt;image&lt;/li&gt;
&lt;li&gt;image&lt;/li&gt;
&lt;/ul&gt;


I've also got the required javascript files from the download link (above) in themename/js. I've also got my own instantiation of the zaccordion in another js file in that same folder and it targets #slideshow like so:

(function ($) {
  $(document).ready(function() {
    $("#slideshow").zAccordion({
      settings here
    });
  });
})(jQuery);


Then, in my libraries.yml file I have this:

zaccordion:
  header: true
  version: 1.x
  js:
    js/jquery.zaccordion.min.js: { }
    js/jquery.zaccordion.js: { }
    js/zaccordionUsage.js: { }
  dependencies:
    - core/jquery


I put that in the 'header' because it wasn't working in the footer. I can confirm the files are being pulled into the page because I see links to the scripts in the &lt;head&gt; of the html.

Finally, I have the javascript library being placed into the page with this call near the top of page--front.html.twig:

{{ attach_library('themename/zaccordion') }}


Are all these settings correct?

I have this same slideshow functionality working easily on a Jekyll site I created so I assume it's something to do with the way my block is trying to reference the javascript files or something.

Note: yes, I have JavaScript aggregation unchecked (Performance > Aggregate Javascript)
The dumbest of all possible mistakes was the answer. I had a &lt;div&gt; wrapping my insertion of the page block, like so:

{% if page.slideshow %}
{{ attach_library('themename/zaccordion') }}
    &lt;div class="col-xs-12" id="slideshow"&gt;
        {{ page.slideshow }}
    &lt;/div&gt;
{% endif %}


I thought if I put the attach_library line there it would load it 'closer' to the actual code needing it (don't try to understand what I was thinking). At any rate, I noticed that I have an id="slideshow" here as well. So I had TWO id="slideshow" - one on this &lt;div&gt; and another on the &lt;ul&gt; in the block...that was causing the slideshow not to work. So I just changed the id of this &lt;div&gt; to something else and it worked.