How to fix collapse that won't work (using Bootstrap 4.0.0)?

May 30, 2022

Here is my code

    <ul class="list-unstyled components">
                    <p>Menus</p>
                    <li>
                        <a href="#employeeform" data-toggle="collapse" data-target="#employeeform" aria-expanded="false" class="dropdown-toggle">Employee</a>
                        <ul class="collapse" id="employeeform">
                            <li>
                                <a href="#">Add New Employee</a>
                            </li>
                            <li>
                                <a href="#">Edit Employee's Data</a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="#customerform" data-toggle="collapse" data-target="#customerform" aria-expanded="false" class="dropdown-toggle">Customer</a>
                        <ul class="collapse list-unstyled" id="customerform">
                            <li>
                                <a href="#">Add New Customer</a>
                            </li>
                            <li>
                                <a href="#">Edit Customer's Data</a>
                            </li>
                        </ul>
                    </li>
</ul>

The problem is, whenever i click on the a element (Employee and Customer), it can’t do the dropdown… Here is the scripts i use :

    <!-- bootdtrap css cdn -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<!-- ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- fontawesome -->
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

I don’t know where i gone wrong, any help would be very much appreciated!

>Solution :

Place bootstrap.min.js at the end.

<!-- bootdtrap css cdn -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<!-- ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- fontawesome -->
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<!-- bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>