title: Blazor - JavaScript/Bootstrap animations and scripts not working in blazor component
body: <p>I have a Blazor site, I am using an HTML template that has CSS and JS for styling.</p>
  <p>I have imported the assets into the wwwroot, and I have made a reference to them in the _Host.cshtml file; The styling and certain elements seem to be working... However I've noticed the animations and other portions of the javascript are not working as intended...</p>
  <p>For example, I have an accordion, and it doesn't expand or close.</p>
  <p>I made the same page in an HTML format and put that in the wwwroot... When I run the code and navigate to that page, it seems to be working just fine. But on my razor page, it is not...</p>
  <p>This is it on the .razor component</p>
  <p><a href="https://i.stack.imgur.com/F96q5.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F96q5.gif" alt="accordion does not expand on .razor" /></a></p>
  <p>This is it on the .html file I made in the wwwroot</p>
  <p><a href="https://i.stack.imgur.com/naTzT.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/naTzT.gif" alt="accordion works on .html" /></a>
  Here is the code...</p>
  <p>_Host.cshtml</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
  
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
      &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
      &lt;meta name=&quot;author&quot; content=&quot;Template Mo&quot;&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&quot; rel=&quot;stylesheet&quot;&gt;
  
      &lt;title&gt;Online Quoting Tool&lt;/title&gt;
  
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;~/assets/css/bootstrap.min.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;~/assets/css/font-awesome.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;~/assets/css/style.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;~/assets/css/owl-carousel.css&quot;&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- ***** Preloader Start ***** --&gt;
      &lt;div id=&quot;preloader&quot;&gt;
          &lt;div class=&quot;jumper&quot;&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ***** Preloader End ***** --&gt;
      &lt;component type=&quot;typeof(App)&quot; render-mode=&quot;ServerPrerendered&quot; /&gt;
  
      &lt;div id=&quot;blazor-error-ui&quot;&gt;
          &lt;environment include=&quot;Staging,Production&quot;&gt;
              An error has occurred. This application may no longer respond until reloaded.
          &lt;/environment&gt;
          &lt;environment include=&quot;Development&quot;&gt;
              An unhandled exception has occurred. See browser dev tools for details.
          &lt;/environment&gt;
          &lt;a href=&quot;&quot; class=&quot;reload&quot;&gt;Reload&lt;/a&gt;
          &lt;a class=&quot;dismiss&quot;&gt;&lt;/a&gt;
      &lt;/div&gt;
  
  
  
      &lt;!-- ***** Footer Start ***** --&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;~/assets/js/jquery-2.1.0.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;~/assets/js/popper.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;~/assets/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;!-- Plugins --&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;~/assets/js/owl-carousel.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;~/assets/js/scrollreveal.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;~/assets/js/waypoints.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;~/assets/js/jquery.counterup.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;~/assets/js/imgfix.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;!-- Global Init --&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;~/assets/js/custom.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;_framework/blazor.server.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  </code></pre>
  <p>custom.js (accordion functions)</p>
  <pre><code> const Accordion = {
      settings: {
        // Expand the first item by default
        first_expanded: false,
        // Allow items to be toggled independently
        toggle: false
      },
  
      openAccordion: function(toggle, content) {
        if (content.children.length) {
          toggle.classList.add(&quot;is-open&quot;);
          let final_height = Math.floor(content.children[0].offsetHeight);
          content.style.height = final_height + &quot;px&quot;;
        }
      },
  
      closeAccordion: function(toggle, content) {
        toggle.classList.remove(&quot;is-open&quot;);
        content.style.height = 0;
      },
  
      init: function(el) {
        const _this = this;
  
        // Override default settings with classes
        let is_first_expanded = _this.settings.first_expanded;
        if (el.classList.contains(&quot;is-first-expanded&quot;)) is_first_expanded = true;
        let is_toggle = _this.settings.toggle;
        if (el.classList.contains(&quot;is-toggle&quot;)) is_toggle = true;
  
        // Loop through the accordion's sections and set up the click behavior
        const sections = el.getElementsByClassName(&quot;accordion&quot;);
        const all_toggles = el.getElementsByClassName(&quot;accordion-head&quot;);
        const all_contents = el.getElementsByClassName(&quot;accordion-body&quot;);
        for (let i = 0; i &lt; sections.length; i++) {
          const section = sections[i];
          const toggle = all_toggles[i];
          const content = all_contents[i];
  
          // Click behavior
          toggle.addEventListener(&quot;click&quot;, function(e) {
            if (!is_toggle) {
              // Hide all content areas first
              for (let a = 0; a &lt; all_contents.length; a++) {
                _this.closeAccordion(all_toggles[a], all_contents[a]);
              }
  
              // Expand the clicked item
              _this.openAccordion(toggle, content);
            } else {
              // Toggle the clicked item
              if (toggle.classList.contains(&quot;is-open&quot;)) {
                _this.closeAccordion(toggle, content);
              } else {
                _this.openAccordion(toggle, content);
              }
            }
          });
  
          // Expand the first item
          if (i === 0 &amp;&amp; is_first_expanded) {
            _this.openAccordion(toggle, content);
          }
        }
      }
    };
  
    (function() {
      // Initiate all instances on the page
      const accordions = document.getElementsByClassName(&quot;accordions&quot;);
      for (let i = 0; i &lt; accordions.length; i++) {
        Accordion.init(accordions[i]);
      }
    })();
  </code></pre>