DETAIL SUMMARY Collapse HTML

<style> 

details>summary::-webkit-details-marker {

display: none; }

</style>

<details>

<summary class="p-3 mb-0 bg-primary text-white"><i class="bi bi-arrow-right-circle-fill"></i> DETAIL</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>

</details>

Bootstrap : Navbar shrink when scroll

JAVASCRIPT : BOOTSTRAP DROPDOWN PILL OR ACCORDION USING DROPDOWN

<div class="dropdown">
    <a class="btn btn-danger dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        Senarai Pegawai
    </a>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <ul class="nav nav-pills flex-column list-unstyled" role="tablist">
            <li class="nav-item list-unstyled">
                <a class="nav-link active umum" data-toggle="pill" href="#semua-unit">SEMUA UNIT</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-satu">UNIT SATU</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-dua">UNIT DUA</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-tiga">UNIT TIGA</a>
            </li>
            <li class="nav-item list-unstyled">
                <a class="nav-link umum" data-toggle="pill" href="#unit-empat"> UNIT EMPAT</a>
            </li>
        </ul>
    </div>
</div>

<div style="margin-top:50px"></div>

<!-- Tab panes -->
<div class="tab-content">
    <div id="welcome" class=" tab-pane fade">

        <h1>SELAMAT DATANG KE DIREKTORI PEGAWAI</h1>

    </div>



    <div id="semua-unit" class=" tab-pane active">

        Semua unit loading...

    </div>




    <div id="unit-satu" class="tab-pane fade">

        Coming soon

    </div>

    <!-- start business data-->

    <div id="unit-dua" class="tab-pane fade">


        Coming soon

    </div>

    <div id="unit-tiga" class=" tab-pane fade">

        Coming soon

    </div>

    <div id="unit-empat" class=" tab-pane fade">

        Coming soon

    </div>
    <!--improvement tab-->
</div>
<!--tab content-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>