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>

Accordian Table showing all panels when clicked when using Shopify linklists

I have a sidebar menu setup that is looping through shopify linklists and outputting the parent and child collection titles and URLs. The problem is that when i click on one of the anchor tags, it opens all of the anchor links as the data-target and id are not unique. I have tried changing the div id to a random number using Mat.random() but cant make this work.
Here is the code
{% for link in linklists[settings.mobile_linklist].links %}
{% if link.links != blank %}
<div class="nav-menu">
<ul id="accordion">
<li class="accordion">
<span><a aria-controls="collapseOne"
aria-expanded="false"
class="collapsible"
data-target="#collapseOne"
data-toggle="collapse"
href="#">{{ link.title }}
</a></span>
<div aria-labelledby="headingOne" class="collapse" id="collapseOne">
<ul>
{% for childlink in link.links %}
<li>
{{childlink.title}}
</li>
{% endfor %}
</ul>
</div>
</li>
</ul>
</div>
{% endif %}
{% endfor %}

you can use the forloop.index to append unique value into a loop in Shopify liquid
{% for link in linklists[settings.mobile_linklist].links %}
{% if link.links != blank %}
<div class="nav-menu">
<ul id="accordion-{{forloop.index}}">
<li class="accordion">
<span><a aria-controls="collapseOne"
aria-expanded="false"
class="collapsible"
data-target="#collapse{{forloop.index}}"
data-toggle="collapse"
href="#">{{ link.title }}
</a></span>
<div aria-labelledby="headingOne" class="collapse" id="collapse{{forloop.index}}">
<ul>
{% for childlink in link.links %}
<li>
{{childlink.title}}
</li>
{% endfor %}
</ul>
</div>
</li>
</ul>
</div>
{% endif %}
{% endfor %}
you read more about forloop here

changing navbar icons to active with django-Javascript

I have made a navbar with bootstrap4 and I want to toggle the icon of current page to active.
Currently, I am using
<li class="nav-item"><a href="/" id="A"
{% if request.path == "/" %}
class="nav-link active"
{% else %}
class="nav-link"
{% endif %}>Home</a></li>
<li class="nav-item"><a href="/blog" id="B"
{% if request.path == "/blog/" %}
class="nav-link active" {% else %}
class="nav-link"
{% endif %}>Blog</a></li>
what I would like is a simpler way with use of url names that could activate a script
like this:
{% if request.path == '/' %}
<script>
document.getElementById("#A").classList.add('active');
if ( document.getElementById("#A").classList.contains('active') )
document.getElementById("#A").classList.toggle('active');
</script>
{% elif request.path == '/blog/' %}
<script>
document.getElementById("#B").classList.add('active');
if ( document.getElementById("#B").classList.contains('active') )
document.getElementById("#B").classList.toggle('active');
</script>
{% endif %}
Could there be an easier way? Please suggest to highlight the active page icon on navbar to toggle styles.
Thank you

The best way to do this without violating DRY principles and hard-coding your urls would be to use reverse in the templates.
Example:
<!-- Top of page (below extends and include) -->
{% url 'index' as index %}
{% url 'blog' as blog %}
<!-- ..... Body HTML ..... -->
<li class="nav-item">
<a href="{{ index }}" id="A" class="nav-link {% if request.path == index %}active{% endif %}">
Home
</a>
</li>
<li class="nav-item">
<a href="{{ blog }}" id="B" class="nav-link {% if request.path == blog %}active{% endif %}">
Blog
</a>
</li>

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