Как я могу отобразить bootstrap выпадающее меню

Question

Я использовал аккордеон, чтобы отобразить элемент формы внутри аккордеона. У меня есть bootstrap dropdownMenuButton в заголовке аккордеона, когда я нажимаю, чтобы увидеть раскрывающийся список, в котором отображается или скрывается аккордеон, затем я добавил следующий код и смог отключить пузырится от кнопки, но я могу получить раскрывающиеся элементы, когда я нажимаю кнопку.

Я пробовал это:

<button onclick="(function(e) {e.preventDefault(); e.stopPropagation(); })(event)" class="btn btn-highlight dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 

Это частично работает, но я могу Вы не можете отобразить выпадающий элемент при нажатии кнопки.

Вот мой код

<div id="accordion1" class="accordion-list list-group" role="tablist" multiselectable="true">
    <div id="tab-1" class="tab list-group-item selected open" aria-selected="true" aria-controls="panel-1"
        aria-expanded="true" role="tab" tabindex="0">
        <span class="et-temp-icon-institute" aria-hidden="true"></span>&nbsp;&nbsp;@Model.ProductName
        (@Model.ProductCode)
        <span class="et-temp-icon-caret-right rotate" aria-hidden="false"></span>
        <div id="Edit-Product-Action-button" class="dropdown">
            <button onclick="$event.stopPropagation();" class="btn btn-highlight dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Actions
                    </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item"href="#">Edit Product</a>
                <a class="dropdown-item"href="#">Add Note</a>
                <a class="dropdown-item"href="#">View Log</a>
            </div>
        </div>
    </div>
    <div id="panel-1" class="panel p-0 m-0" aria-labelledby="tab-1" aria-hidden="false" role="tabpanel" style="">
        <div class="row" style="margin-left:15px !important; ">
            <div class="quarter">
                <h5>accordion content goes here </h5>
            </div>
        </div>
    </div>
</div>

Я пробовал это:

<button onclick="(function(e) {e.preventDefault(); e.stopPropagation(); })(event)" class="btn btn-highlight dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">