I have a Blazor site, I am using an HTML template that has CSS and JS for styling.
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...
For example, I have an accordion, and it doesn't expand or close.
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...
This is it on the .razor component
This is it on the .html file I made in the wwwroot
Here is the code...
_Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Template Mo">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<title>Online Quoting Tool</title>
<link rel="stylesheet" type="text/css" href="~/assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="~/assets/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="~/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="~/assets/css/owl-carousel.css">
</head>
<body>
<!-- ***** Preloader Start ***** -->
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- ***** Preloader End ***** -->
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<!-- ***** Footer Start ***** -->
<!-- jQuery -->
<script type="text/javascript" src="~/assets/js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="~/assets/js/popper.js"></script>
<script type="text/javascript" src="~/assets/js/bootstrap.min.js"></script>
<!-- Plugins -->
<script type="text/javascript" src="~/assets/js/owl-carousel.js"></script>
<script type="text/javascript" src="~/assets/js/scrollreveal.min.js"></script>
<script type="text/javascript" src="~/assets/js/waypoints.min.js"></script>
<script type="text/javascript" src="~/assets/js/jquery.counterup.min.js"></script>
<script type="text/javascript" src="~/assets/js/imgfix.min.js"></script>
<!-- Global Init -->
<script type="text/javascript" src="~/assets/js/custom.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
custom.js (accordion functions)
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("is-open");
let final_height = Math.floor(content.children[0].offsetHeight);
content.style.height = final_height + "px";
}
},
closeAccordion: function(toggle, content) {
toggle.classList.remove("is-open");
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("is-first-expanded")) is_first_expanded = true;
let is_toggle = _this.settings.toggle;
if (el.classList.contains("is-toggle")) is_toggle = true;
// Loop through the accordion's sections and set up the click behavior
const sections = el.getElementsByClassName("accordion");
const all_toggles = el.getElementsByClassName("accordion-head");
const all_contents = el.getElementsByClassName("accordion-body");
for (let i = 0; i < sections.length; i++) {
const section = sections[i];
const toggle = all_toggles[i];
const content = all_contents[i];
// Click behavior
toggle.addEventListener("click", function(e) {
if (!is_toggle) {
// Hide all content areas first
for (let a = 0; a < 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("is-open")) {
_this.closeAccordion(toggle, content);
} else {
_this.openAccordion(toggle, content);
}
}
});
// Expand the first item
if (i === 0 && is_first_expanded) {
_this.openAccordion(toggle, content);
}
}
}
};
(function() {
// Initiate all instances on the page
const accordions = document.getElementsByClassName("accordions");
for (let i = 0; i < accordions.length; i++) {
Accordion.init(accordions[i]);
}
})();
