Code:
https://codepen.io/Marty-Development/pen/yLezBNX
I add HTML in the usercp_nav, CSS in the Global.css. Then I add Javascript code in the headerinclude template.
Like this:
<script type="text/javascript">
<!--
JAVASCRIPT CODE
//-->
</script>
But when I clicked the buttons, they don't work. I think this is JS problem. (Also other collapsible codes don't work.) What should I do?
Can you provide an url to see the trouble ?
(2020-07-27, 02:24 PM)Crazycat Wrote: [ -> ]Can you provide an url to see the trouble ?
I just wanted to convert menu to collapsible menu. So my usercp is not gonna look like this. But the trouble is that:
https://kizlarerkekler.com/usercp.php
Provide a test account too please
One of the troubles is with a small piece of JS you have at the end of your page:
<script>
(function(){
var burger = document.querySelector('.mobile_button'),
header = document.querySelector('.nav-bar');
burger.onclick = function() {
header.classList.toggle('nav-bar-open');
}
}());
</script>
You have no object with class "mobile_button"
The other is that your JS is initialized before the html is created. You need to encapsulate it in a
$(document).ready(function() {....});
(2020-07-27, 05:11 PM)Crazycat Wrote: [ -> ]One of the troubles is with a small piece of JS you have at the end of your page:
You have no object with class "mobile_button"
The other is that your JS is initialized before the html is created. You need to encapsulate it in a $(document).ready(function() {....});
Thank you. But It still doesn't work. I removed this JS code (mobile_button etc.) I added '
$(document).ready(function() {....}); ' and my JS code now:
<script type="text/javascript">
<!--
$(document).ready(function() {
let acc = document.querySelectorAll(".accordion");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
let panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
//-->
</script>
What should I do?
Thanks.
You have a syntax error. You forget the final });
(2020-07-27, 10:18 PM)Crazycat Wrote: [ -> ]You have a syntax error. You forget the final });
Thank you for everything. I added it. Now this works but when I clicked the button, the page refreshes itself. I tried 2 different code but it still same.
You're using buttons element, so add a
return false; to stop its normal behavior:
$(document).ready(function() {
let acc = document.querySelectorAll(".accordion");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
let panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
return false;
});
}
});