How can I show a clickable dropdown inside an accordion. I have the following code that displays a form element inside a dropdown but in the tab I have dropdownMenuButton when I click to see the dropdown list it show or hide the accordion how can I disable the accordion effect from the dropdown?
<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> @Model.ProductName
(@Model.ProductCode - SM)
<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>
I tried this
<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">
working partially but I cant get the dropdown item to show on buttonlcik
