I have the following nav menu made with bootstrap toggle where only the first element of the list is being showed, no matter which one it is. I tried replacing the first element with another one and I get the same behaviour so this makes me believe that the html code is working.
<a href="#getting-started" class="list-group-item list-group-item-
success" data-toggle="collapse" data-parent="#admin-menu"><span></span><i
class="fa fa-tachometer fa-lg" aria-hidden="true"></i>Getting Started<i
class="fa fa-caret-down"></i></a>
<div class="collapse sp" id="getting-started">
<a class="navlink list-group-item" href="software.html">General
Information</a>
<a class="navlink list-group-item"
href="install_linux.html">Linux Installation</a>
<a class="navlink list-group-item"
href="install_win.html">Windows Installation</a>
<a class="navlink list-group-item" href="install_mac.html">Mac
Installation</a>
<a class="navlink list-group-item"
href="install_docker.html">Docker Installation</a>
<a class="navlink list-group-item"
href="lang_installation.html">Installing Languages</a>
<a class="navlink list-group-item" href="login.html">Login</a>
<a class="navlink list-group-item"
href="license.html">License</a>
<a class="navlink list-group-item"
href="releasenotes.html">Release notes</a>
</div>
I load boostrap.js jquery and the script I use works on a different site. Or if you know where I can find a script for showing an online manual with a menu on the left site. In order to check behaviour please visit https://www.dialtrix24.com/test/doc/index.html where you can find it on the left side. The pages are not populated but the script only toggles the Getting Started section, the other lower sections are not working.
Here is part of the js script:
//Navigation slide animation
$( document).ready(function() {
var str = document.URL;
var address = str.substring(str.lastIndexOf('/')+1);
// address = address.replace(/[0-9]/g, '');
$('a[href="'+address +'"]').addClass('currentPage');
$('a[href="'+address+'"]').parent('div').addClass('in').addClass('heightTest').prev ().find('.fa-lg').css( "color", "#c70000" );
//$('a[href="'+address+'"]').parent('li').addClass('heightTest');
$('a[href="'+address+'"]').parent('li').parent('ul').parent('div').parent('div').addClass('heightTest').addClass ('in').parent('div').addClass('heightTest').addClass('in').prev().find('.fa-lg').css( "color", "#c70000" );
$('.blur').click(function(e){
$(".navbar-inverse").toggleClass('whiteColor');
$('.fa- chevron-right').toggleClass('rotate1');
});
var doc_links =
[
//Getting Started----------------------------------------------
{
"name":"General Information",
"link": "software",
"type": "docs",
"data": ""
},
{
"name":"Linux Installation",
"link": "install_linux",
"type": "docs",
"data": ""
},
and so on
Thank you
The issue was resolved as it was an offset of 75px to the div containing the anchors and so I added position relative and z-index 1 and now it is working.