Bootstrap Collapse is collapsing but immediately closing the Collapse

Question

When I click on the toggle button the collapse comes down but when ending the down animation the collapse goes up without any interaction.

I tried everything of library references and its order positioning but even then I get the same result as before.

This is my HTML-Code:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sti-navbar-light mb-xl-5 justify-content-center" id="mainNav">
    <div class="container align-content-center justify-content-center">
        <a class="navbar-brand" href="./link.php">NAME</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle"
                aria-controls="navbarToggle" aria-expanded="true" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarToggle">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a href="./link.php" class="nav-link">LINK</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

My imports in at the end of the page(tried it also at the header):

<script src="./js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.7/js/tether.min.js"></script>
<script src="./libs/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="./js/canvasjs.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

I also tried the links of the bootstrap documentation but none of them worked.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

So what could be a problem? - cause the order and the links normally should work

Answer 1

Implementation of external libraries such as BootStrap and jQuery requires a certain order so that they can work properly around each other. If you add your libraries randomly and your HTML objects cannot find these, you will probably see weird design issues or javascript codes not working how they supposed to work.

Notice how below snippet adds the external libraries and how the toggle menu successfully works.

I also recommend using full jQuery instead of the slim version.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <nav class="navbar navbar-expand-lg navbar-dark bg-dark sti-navbar-light mb-xl-5 justify-content-center" id="mainNav"> <div class="container align-content-center justify-content-center"> <a class="navbar-brand" href="./link.php">NAME</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="true" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarToggle"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a href="./link.php" class="nav-link">LINK</a> </li> </ul> </div> </div> </nav>