title: Bootstrap 5: How to properly toggle dropdown with another button
body: <p>So I have a dropdown menu and next to it a button. The aim is for the button to open and close the dropdown menu, and clicking on the text in the dropdown box should also open and close the menu.</p>
  <p>I've been trying to adapt the working Bootstrap 3 code from this post <a href="https://stackoverflow.com/questions/42476070/toggle-bootstrap-button-dropdown-using-another-button/42477393">Toggle bootstrap button dropdown using another button</a> for Bootstrap 5 but can't get it fully working as I would like it to. Any help at all would be greatly appreciated.</p>
  <p>My code is below:</p>
  <pre><code>&lt;div class=&quot;btn-group&quot;&gt;
    &lt;a id=&quot;test-dropdown-btn&quot; class=&quot;btn dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot;&gt;Select Category&lt;/a&gt;
      &lt;ul class=&quot;dropdown-menu&quot;&gt;
        &lt;li&gt;&lt;a class=&quot;dropdown-item&quot;&gt;All Categories&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class=&quot;dropdown-item&quot;&gt;Categoty One&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class=&quot;dropdown-item&quot;&gt;Categoty Two&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class=&quot;dropdown-item&quot;&gt;Categoty Three&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class=&quot;dropdown-item&quot;&gt;Categoty Four&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class=&quot;dropdown-item&quot;&gt;Categoty Five&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
   &lt;a id=&quot;test-btn&quot; class=&quot;btn btn-primary&quot; data-bs-toggle=&quot;dropdown&quot; data-bs-target=&quot;.btn-group&quot;&gt;&amp;#9660&lt;/a&gt;
  </code></pre>
  <p>jsfiddle here: <a href="https://jsfiddle.net/Ernesto1/gefvd0s1/17/" rel="nofollow noreferrer">https://jsfiddle.net/Ernesto1/gefvd0s1/17/</a></p>