Javascript scroll to sections and also scroll to section but open relevant nav-tab

Hi

I have a nav menu that has links in it that scroll to the relevant section which does seem to work but also got other links in the same nav menu that scroll to the relevant section but also has nav-tabs tab-pane code in that I would like to open when click on the link, for example I have the following code in the nav menu

<nav id="nav">
                                    <div id="bs-example-navbar-collapse-1">
                                        <ul class="menus" id="mainMenu">
                                            <li><a href="#home" class="parent-link scrolllink">Home</a></li>
                                            <li><a href="#about" class="parent-link scrolllink">About</a></li>
                                            <li><a data-toggle="tab" href="#sideglass" class="parent-link scrolllinktwo" aria-controls="#sideglass">Side Glass</a></li>
                                            <li><a data-toggle="tab" href="#glassreardoors" class="parent-link scrolllinktwo" aria-controls="#glassreardoors">Glass Rear Doors</a></li>
                                            <li><a data-toggle="tab" href="#doorhandleslocks" class="parent-link scrolllinktwo" aria-controls="#doorhandleslocks">Door Handles &amp; Locks</a></li>
                                            <li><a data-toggle="tab" href="#gasstruts" class="parent-link scrolllinktwo" aria-controls="#gasstruts">Gas Struts</a></li>
                                            <li><a href="#contact" class="parent-link scrolllink">Contact</a></li>
                                        </ul>
                                        <div id="mobileMenu"></div>
                                    </div>
                                </nav>

HTML:

I would like the Home link to scroll to the home section of the webpage and the Glass Rear Doors link for example to scroll to the section where the tabs are but to also open the tab-pane for Glass Rear Doors to show the relevant content

I got the following code so far, it kind of works but is messy as I have to click on the Glass Rear Door link twice in the nav menu and each one scrolls up that bit further

My nav tab code is below

<ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="sideglass-tab" data-toggle="tab" href="#sideglass" role="tab" aria-controls="sideglass" aria-selected="true"><i class="flaticon-battery"></i>Side Glass</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="glassreardoors-tab" data-toggle="tab" href="#glassreardoors" role="tab" aria-controls="glassreardoors" aria-selected="false"><i class="flaticon-break"></i>Glass Rear Doors</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="doorhandleslocks-tab" data-toggle="tab" href="#doorhandleslocks" role="tab" aria-controls="doorhandleslocks" aria-selected="false"><i class="flaticon-seat-belt"></i>Door Handles &amp; Locks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="gasstruts-tab" data-toggle="tab" href="#gasstruts" role="tab" aria-controls="gasstruts" aria-selected="false"><i class="flaticon-settings"></i>Gas Struts</a>
                </li>
            </ul>

<div class="tab-content">
                <div class="tab-pane fade show active" id="sideglass" role="tabpanel" aria-labelledby="sideglass-tab">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="single-service">
                                <i class="flaticon-battery"></i>
                                <h3>Side Glass</h3>
                                <p>
                                    Tell us what your car needs or ask for a diagnostic. Receive a free, fast, fair & transparent price quote.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="glassreardoors" role="tabpanel" aria-labelledby="glassreardoors-tab">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="single-service">
                                <i class="flaticon-battery"></i>
                                <h3>Glass Rear Doors</h3>
                                <p>
                                    Tell us what your car needs or ask for a diagnostic. Receive a free, fast, fair & transparent price quote.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

HTML:

The javsacript is below

<script>
    $('#bs-example-navbar-collapse-1 a.scrolllinktwo[data-toggle="tab"]').click(function(e) {
      e.preventDefault()
      $("#myTab [href=" + e.target.hash + "]").tab('show')
    });

    $('a.scrolllinktwo[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      var divId = $(e.target).attr("href")
      $('html,body').animate({
        scrollTop: $(divId).offset().top
      }, 500);
    });
   
    $('a.scrolllink, a.scrolllinktwo').click(function(event){
        event.preventDefault()
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 300
    }, 500);
    return false;
});
   
  </script>

Code (JavaScript):

 

In both cases my advice would be to stop using JS for things that don't need to be scripted anymore. This isn't 2012.

html {
  scroll-behavior: smooth;
}

Code (markup):

See my pen here:
https://codepen.io/jason-knight/pen/qBVXBmr

Just let on-page hash links pointed at ID's do your heavy lifting. The same can be said of tabs!
https://codepen.io/jason-knight/pen/WNXgKLq?editors=1100

The fun part being that you can link to a tab from anywhere as it's hash link driven, and it'll even smooth scroll to the tab if you make a link elsewhere since all on-page links can be smooth scrolled using "scroll-behavior".

The has tab approach has one flaw, it switches back to the "default" (last) tab if you hash link elsewhere on the page. There is another technique I could show you using radio INPUT if you need to not be able to hash link to them and/or fill up the browser history.

The same techniques can be used to make entire modal dialog driven websites without a line of scripting.

https://levelup.gitconnected.com/modal-dialog-driven-websites-without-javascript-16e858615780

If you've used up your three free medium reads a month, the demo is here:
https://cutcodedown.com/for_others/medium_articles/modalSite/

This stuff isn't JavaScript's job anymore. Certainly not the job of mind-numbing garbage framework mental midgetry like jQuery, teaching you how and where NOT to use JavaScript in any way, shape, or form.

Side note, you got enough "DIV for nothing" slopped in there? The general code bloat of that and nonsense like Aria roles certainly not helping you any... but that goes with using the equally intellectually challenged middle finger to why HTML and CSS even exists that is bootcrap. Or is that failwind? Who can tell anymore?!?

It's truly shocking how all that framework garbage somehow suckers people into thinking that writing two to ten times the code, ignoring the basics of accessibility, using JS for nothing, is somehow magically "easier" or "better for collaboration" or any of the other 100% bunko, fictions, and bald faced LIES they claim about them.