Develop Reference

Having trouble with a hierarchical Wordpress sidebar menu. The script always appends the slug so you can't navigate back up the hierarchy

The menu uses a toggle to drop down child pages. It's then possible to navigate to a child page, but getting back to the parent page, or a different parent page is impossible, since each time, the slug is appended to the URL.
For example:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/
Within the Women and Epilepsy segment I can reach child pages like:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/pregnancy-planning/
But I can't then go back to a different section like 'Living With Epilepsy' because this happens, resulting in a 404:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/pregnancy-planning/living-with-epilepsy
Can anyone help? Thanks so much for taking the time to read this!
<aside class="sub-menu col mx-auto">
<ul class="nav flex-column mx-2 menu">
{% set siblings = post_query({
'post_type': 'page',
'post_parent': ancestor,
'orderby': 'menu_order',
'order': 'ASC'
}) %}
<a class="nav-side-title {% if fn('is_page', ancestor.slug) %}active{% endif %}" href="{{ ancestor.link }}">
<h4>{{ ancestor_name }}</h4></a>
{% for sibling in siblings %}
{% if sibling.children %}
<div class="top mx-2 d-flex align-items-baseline">
<li class="nav-item top-parent has-child collapsed" href="#{{ sibling.slug }}" data-toggle="collapse" aria-controls="{{ sibling.title }}"></li>
<a class="nav-link {% if fn('is_page', sibling.slug) %}active{% endif %}" href="{{ sibling.slug }}">{{ sibling.title }}</a>
</div>
<ul id="{{ sibling.slug }}" class="collapse child-menu" aria-labelledby="{{ sibling.title }}">
{% for subpage in sibling.children %}
{% if subpage.post_type == "page" %}
{% if subpage.children %}
<div class="mx-3 d-flex align-items-baseline">
<li class="nav-item middle-parent has-child collapsed" href="#{{ subpage.slug }}" data-toggle="collapse" aria-controls="{{ subpage.title }}"></li>
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</div>
<ul id="{{ subpage.slug }}" class="grandchild-menu collapse" aria-labelledby="{{ subpage.title }}">
{% for subpage_2 in subpage.children %}
{% if subpage_2.post_type == "page" %}
<li class="nav-item bottom">
<a class="nav-link subpage{% if fn('is_page', subpage_2.slug) %} active{% endif %}" href="{{ subpage_2.link }}"> {{ subpage_2.title }}</a>
</li>
{% endif %}
{% endfor %}<!--subpage_2-->
</ul>
{% else %}<!--subpage.children-->
<li class="nav-item middle">
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</li>
{% endif %} <!--subpage.children-->
{% else %}
<li class="nav-item middle">
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</li>
{% endif %}<!--subpage.children page-->
{% endfor %} <!--subpage-->
</ul>
{% else %} <!--sibling.children-->
<li class="nav-item top">
<a class="nav-link {% if fn('is_page', sibling.slug) %} active{% endif %}" href="{{ sibling.link }}">{{ sibling.title }}</a>
</li>
{% endif %}<!--sibling.children-->
{% endfor %} <!--sibling-->
</ul>
</aside>

How to make element active in sidebar which is in django include tag through javascript?

I have made sidebar in sidebar.html
and had include it in main.html as well as dashboard.html through django include tag to reduce data reduntancy->
{% include 'employee/sidebar.html' %}
{% block content %}
{% endblock %}
Now how do I make different elements (in sidebar) active according to the different pages?
Like for example, When I am on dashboard.html , dashboard should be active in sidebar.
Here is sidebar.html
<ul>
<li class="nav-item">
<a class="nav-link" href="admin_dashboard.html">
<span>Dashboard</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="main.html">
<span>Create</span></a>
</li>
</ul>

You should use the url tag for getting the path to your other views/urls, this tag takes an argument as that stores the result of the tag as a variable, this variable can be used to add classes if the current path matches the URL
<ul>
{% url 'dashboard' as dashboard_url %}
<li class="nav-item {% if request.path == dashboard_url %}active{% endif %}">
<a class="nav-link" href="{{ dashboard_url }}"><span>Dashboard</span></a>
</li>
{% url 'main' as main_url %}
<li class="nav-item {% if request.path == main_url %}active{% endif %}">
<a class="nav-link" href="{{ main_url }}"><span>Create</span></a>
</li>
</ul>

Commenting out HTML, CSS, Javascript Code Together

I have the following code in a base.html file in a Django project's header area.
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'create' %}"><span class="oi oi-plus"></span></a>
<a class="nav-item nav-link" href="javascript:{document.getElementById('logout').submit()}" onclick="">Logout</a>
<form id="logout" method="POST" action="{% url 'logout' %}">
{% csrf_token %}
<input type="hidden" />
</form>
{% else %}
<a class="nav-item nav-link" href="{% url 'signup' %}">Sign Up</a>
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
{% endif %}
I try to comment out the Javascript area "{% url 'create' %}" but it is not working (the error appears because the 'create' code chunks don't yet exists):
<a class="nav-item nav-link" href="/*{% url 'create' %}*/"><span class="oi oi-plus"></span></a>
<!-- <a class="nav-item nav-link" href="{% url 'create' %}"><span class="oi oi-plus"></span></a> -->
<!-- <a class="nav-item nav-link" href="/*{% url 'create' %}*/"><span class="oi oi-plus"></span></a> -->
When I delete the whole line the error disappears. What I would be interested is how to keep it as a comment so later on when I implement that area I can uncomment it.

You have two solutions.
For a code block use:
{% comment %}...{% endcomment %}
For single line you can use this:
{# some text #}

Scrollspy - on nav click Chrome scrolls, IE & FF doesn't

Clicking on navbar scrolls the page correctly in Chrome, nothing happens in FF and IE.
Any idea?
Here's a part of my nav's jsx:
handleOnClick (e) {
e.preventDefault();
if (this.props.show) {
var target = $(e.target.parentElement);
var el = $('#section-' + this.props.id);
$('.list-group-item').removeClass('active');
$('.scrollspy').removeClass('scrollspy-active');
target.addClass('active');
$('body').animate(
{scrollTop: (el.offset().top - 20)},
{
duration: 200,
done: () => {
$('.scrollspy').addClass('scrollspy-active');
}
});
this.props.onSelected(e, this.props.id);
if ($(window).width() <= 992) {
$('.collapse').collapse('hide');
}
}
};
UPDATE: And here's my nav.html. Forgive me if it's too much.
Forums say that there used to be a scrollspy's problem regarding FF and IE that was releted to height but it doesn't seem to be that one.
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Main navigation -->
<ul class="nav navbar-nav">
{% for nav_item in nav %}
{% if nav_item.children %}
<li class="dropdown{% if nav_item.active %} active{% endif %}">
{{ nav_item.title }} <b class="caret"></b>
<ul class="dropdown-menu">
{% for nav_item in nav_item.children %}
{% include "nav-sub.html" %}
{% endfor %}
</ul>
</li>
{% else %}
<li {% if nav_item.active %}class="active"{% endif %}>
{{ nav_item.title }}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
<ul class="nav navbar-nav navbar-right">
{% if repo_url %}
<li>
<a href="{{ repo_url }}">
{% if repo_name == 'GitHub' %}
<i class="fa fa-github"></i>
{% elif repo_name == 'Bitbucket' %}
<i class="fa fa-bitbucket"></i>
{% endif %}
{{ repo_name }}
</a>
</li>
{% endif %}
</ul>
</div>

It was about changing
$('body').animate(
to
$('html,body').animate(

Jquery after click and load it copy and paste part of HTML

I am here with a good problem that I don't know how to fix it. I was putting some javascript inside my volt file and when I asked to click it works and load the page but the problem is that also copy and past part of my <head> files and part of my bootstrap navbar menu <nav>.
Bootstrap Menu code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li {% if view.url == '/' %}
class="active"
{% endif %}
><a class="navbar-brand" href="/">DaizCode</a></li>
</ul>
</div>
<?php
$this->view->url = $this->router->getRewriteUri();
?>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php if(isset($_SESSION['username']) == false) { ?>
<li {% if view.url == '/about' %}
class="active"
{% endif %}
>About Us
</li>
<li {% if view.url == 'auth/login' %}
class="active"
{% endif %}
>Login
</li>
<li {% if view.url == 'auth/register' %}
class="active"
{% endif %}
>Register
</li>
<?php } else { ?>
<li {% if view.url == '/auth/dashboard' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/activity-icon.png" />
</li>
<li {% if view.url == '/auth/dashboard/learn' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/learn-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/discussions' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/conv-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/notifications' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/globe-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/inbox' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/inbox-icon.png" />
</li>
<?php } ?>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
{{ content() }}
{{ content() }} is part of the volt template where it goes pick the other pages immediately to show it.
I have some PHP so I can show different menu after the user be on or not.
Here it is the nav file (nav.volt) code:
<input type="text" class="user-login" name="user-login" placeholder="Username..." />
<input type="password" class="password-login" name="pwd" placeholder="Password..." />
X
Here I let you my volt page (script part):
{{ javascript_include('/js/jquery-3.1.1.js') }}
{{ javascript_include('/js/jquery-3.1.1.min.js') }}
{{ javascript_include('/js/bootstrap.min.js') }}
<script type="text/javascript">
$(".login").click(function() {
$(".navbar-right").load("auth/login/nav");
return false;
});
</script>
Here I can show you the image where you see the inspect of the page, and it is inspecting after the click of class .login which is in bootstrap navbar. The code I want to show on it is there after the red rectangle.
What I want to know is how can I remove what's inside of the rectangle. See the image below.
Google Chrome Inspect of the problem I said above
Updated image problem
Thank you.

You can add this to fetch specific part of the file ,
This would load the input elements and a tag after input element with out loading nav or any other tags.
<script type="text/javascript">
$(".login").click(function() {
$(".navbar-right").load("auth/login/nav input,input+a");
return false;
});
</script>
Hope this helps