How to move dropdown-menu to another block?

Question

Bootstrap

Suppose there is such a block

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

How can I separate the dropdown-menu block so that it looks like this:

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
</button>

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

It worked in bootstrap 3, but not in 4. In addition, the dropdown does not work without the dropdown-menu class.

Answer 1

in version 4 you can use data-toggle="collapse" for this, just replace dropdown with collapse.
And if you need data-toggle="dropdown", then you have to wrap it in a single div.

Answer 2

What is it for you? It just seems to me that this is superfluous if you want to implement some kind of animation to display the block with links itself. It can be done like this too.