For the past couple of days, I've been grappling with this issue. Despite my best efforts, being new to javascript may be hindering my progress.
My goal is to create a Side Navigation that highlights the current section you are on. Fortunately, I stumbled upon a fantastic jquery plugin that does exactly that here
However, I'm dealing with subitems and would like to toggle the visibility of these subitems when the current section is active. Essentially, the ul should be visible if the parent list item has the class .current or if any of its sublist items have the class .current.
I understand that triggering an event on class change might be necessary for this functionality. Here's what I tried so far:
HTML Markup:
<ul id="nav">
<li class="current"><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li class="parent"><a href="#section-3">Section 3</a>
<ul class="sublist">
<li><a href="#subsection-1">Subsection 1</a></li>
<li><a href="#subsection-2">Subsection 2</a></li>
<li><a href="#subsection-3">Subsection 3</a></li>
</ul>
</li>
</ul>
I attempted the following jQuery code:
$('#nav').on('event', function(){
$('.parent').addClass('current').trigger('visibility');
});
$('.parent').on('visibility', function(){
$('.parent .sublist').addClass('visible');
});
Essentially, I aim to replicate the behavior seen in Bootstrap documentation. As you scroll down, Glyphicons become visible at specific sections; similarly, the subitems expand once you reach them here
The SASS styling applied to the navigation structure so far looks like this:
.overview{
transition: .3s all;
ul{
margin-left: 10px;
ul{
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
}
}
}
.current{
> a{
font-weight: $bold;
}
ul{
max-height: 9999px !important;
transition: max-height 1s ease-out;
}
}
Though I managed to display the sublist when the parent is set to current, it disappears once the child becomes current. Therefore, I suspect some javascript intervention is necessary