<style>        .responsive-tab-menu .nav-pills .nav-link.active,        .responsive-tab-menu .nav-pills .show>.nav-link {            color: unset;        }        @media (max-width: 767px) {            .responsive-tab-content,            .responsive-tab-menu {                display: block !important;            }            .nav-pills.nav-tabs-dropdown,            .nav-tabs-dropdown {                border: 1px solid #dddddd;                border-radius: 5px;                overflow: hidden;                position: relative;            }            .nav-pills.nav-tabs-dropdown::after,            .nav-tabs-dropdown::after {                content: "☰";                position: absolute;                top: 8px;                right: 15px;                z-index: 2;                pointer-events: none;            }            .nav-pills.nav-tabs-dropdown.open a,            .nav-tabs-dropdown.open a {                position: relative;                display: block;            }            /* .nav-pills.nav-tabs-dropdown.open>li.active>a,            .nav-tabs-dropdown.open>li.active>a {                background-color: #eeeeee;            } */            .nav-pills.nav-tabs-dropdown li,            .nav-tabs-dropdown li {                display: block;                padding: 0;                vertical-align: bottom;            }            .nav-pills.nav-tabs-dropdown>li>a,            .nav-tabs-dropdown>li>a {                position: absolute;                top: 0;                left: 0;                margin: 0;                width: 100%;                height: 100%;                display: inline-block;                border-color: transparent;            }            .nav-pills.nav-tabs-dropdown>li>a:focus,            .nav-tabs-dropdown>li>a:focus,            .nav-pills.nav-tabs-dropdown>li>a:hover,            .nav-tabs-dropdown>li>a:hover,            .nav-pills.nav-tabs-dropdown>li>a:active,            .nav-tabs-dropdown>li>a:active {                border-color: transparent;            }            /* hh */            .nav-pills.nav-tabs-dropdown>li>a.active,            .nav-tabs-dropdown>li>a.active {                display: block;                border-color: transparent;                position: relative;                z-index: 1;                background: #fff;            }            .nav-pills.nav-tabs-dropdown>li.active>a:focus,            .nav-tabs-dropdown>li.active>a:focus,            .nav-pills.nav-tabs-dropdown>li.active>a:hover,            .nav-tabs-dropdown>li.active>a:hover,            .nav-pills.nav-tabs-dropdown>li.active>a:active,            .nav-tabs-dropdown>li.active>a:active {                border-color: transparent;            }        }    </style>

.responsive-tab-menu

<div>  ......</div>

<ul role="tablist" aria-orientation="vertical">    <li>        <a href="#" data-bs-toggle="pill"            data-bs-target="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>    </li>    <li>        <a href="#" data-bs-toggle="pill"            data-bs-target="#v-pills-profile" role="tab" aria-controls="v-pills-profile"            aria-selected="false">Profile</a>    </li></ul>

<div>    <div role="tabpanel" aria-labelledby="v-pills-home-tab"tabindex="0">home</div>    <div role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">profile</div></div>

<script>    $('.nav-tabs-dropdown')        .on("click", ".nav-link:not('.active')", function (event) {            // alert('e');            $(this).closest('ul').removeClass("open");        })        .on("click", ".nav-link.active", function (event) {            // alert('e');            $(this).closest('ul').toggleClass("open");        });</script>

index.html