this is the Code for my Navigation Bar (ignore the .hide() spam)

  function test(){
    var tabsNewAnim = $('#navbarSupportedContent');
    var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
    var activeItemNewAnim = tabsNewAnim.find('.active');
    var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
    var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
    var itemPosNewAnimTop = activeItemNewAnim.position();
    var itemPosNewAnimLeft = activeItemNewAnim.position();
    $(".hori-selector").css({
        "top":itemPosNewAnimTop.top   "px",
        "left":itemPosNewAnimLeft.left   "px",
        "height": activeWidthNewAnimHeight   "px",
        "width": activeWidthNewAnimWidth   "px"
    });
    $("#navbarSupportedContent").on("click","li",function(e){
        $('#navbarSupportedContent ul li').removeClass("active");
        $(this).addClass('active');
        var activeWidthNewAnimHeight = $(this).innerHeight();
        var activeWidthNewAnimWidth = $(this).innerWidth();
        var itemPosNewAnimTop = $(this).position();
        var itemPosNewAnimLeft = $(this).position();
        $(".hori-selector").css({
            "top":itemPosNewAnimTop.top   "px",
            "left":itemPosNewAnimLeft.left   "px",
            "height": activeWidthNewAnimHeight   "px",
            "width": activeWidthNewAnimWidth   "px"
        });
    });
}
$(document).ready(function(){
    setTimeout(function(){ test(); });
      $("#toggle1").click(function() {
    $("#panel1").show("slow");
     $("#panel2").hide();
      $("#panel3").hide();
       $("#panel4").hide();
        $("#panel5").hide();
  });

      $("#toggle2").click(function() {
    $("#panel1").hide()
     $("#panel2").show("slow");
      $("#panel3").hide();
       $("#panel4").hide();
        $("#panel5").hide();
  });

      $("#toggle3").click(function() {
    $("#panel1").hide()
     $("#panel2").hide()
      $("#panel3").show("slow");
       $("#panel4").hide();
        $("#panel5").hide();
  });

      $("#toggle4").click(function() {
    $("#panel1").hide()
     $("#panel2").hide()
      $("#panel3").hide()
       $("#panel4").show("slow");
        $("#panel5").hide();
  });

        $("#toggle5").click(function() {
    $("#panel1").hide()
     $("#panel2").hide()
      $("#panel3").hide()
       $("#panel4").hide()
        $("#panel5").show("slow");
  });
});
$(window).on('resize', function(){
    setTimeout(function(){ test(); }, 500);
});
$(".navbar-toggler").click(function(){
    $(".navbar-collapse").slideToggle(300);
    setTimeout(function(){ test(); });
});

When the page loads I want to hide divs with the id #panel2, #panel3, #panel4... How can I do this?

Or is it also possible that if the links lead to a specific id, for example href="#panel4" and I refresh the page, that all divs are hidden except #panel4?

EDIT The HTML Nav:

  <li >
                    <a id="toggle1"  href="javascript:void(0);"><i ></i>My Link</a>
                </li>
                <li >
                    <a id="toggle2"  href="javascript:void(0);"><i ></i>Buttons</a>
                </li>
                <li >
                    <a id="toggle3"  href="javascript:void(0);"><i ></i>Background</a>
                </li>
                <li >
                    <a id="toggle4"  href="javascript:void(0);"><i ></i>Tracking</a>
                </li>
                <li >
                    <a id="toggle5"  href="javascript:void(0);"><i ></i>Other</a>
                </li>

CodePudding user response：

If you want to hide them as soon as the DOM finished loading you can use the DOMContentLoaded event.

You also need to check if the DOMContentLoaded event hasn't fired before your code execution. You can do that with the document.readyState

With jQuery you have the .hide() method to hide elements.

You can also show keep the anchor used in your url visible. You can get it with window.location.href and a regex.

const regex = /#.*/;
const url = window.location.href;
const anchor = url.match(regex)[0]

if(document.readyState === "complete") {
    $("#panel2, #panel3, #panel4").hide();
    $(anchor).show();
}else{
    window.addEventListener('DOMContentLoaded', (event) => {
        $("#panel2, #panel3, #panel4").hide();
        $(anchor).show();
    });
}

However, you might have a small delay where you see the elements.