JSFiddle - React, Tailwind, and code Playground

by Ernesto1

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- *** Dropmenu and Search Bar *** -->
<div class="row" id="searchContainer">
  <p class="posterTopText">ALL POSTERS</p>
  <div class="d-lg-flex" id="insideSearchContainer">
    <div class="dropdown" id="dropdownContainer">
      <button class="btn btn-light dropdown-toggle" type="button" id="categoryDropdown" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
        Select Category
      </button>
      <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
        <li><a class="dropdown-item">All Categories</a></li>
        <li><a class="dropdown-item">Category One</a></li>
        <li><a class="dropdown-item">Category Two</a></li>
        <li><a class="dropdown-item">Category Three</a></li>
        <li><a class="dropdown-item">Category Four</a></li>
        <li><a class="dropdown-item">Category Five</a></li>
      </ul>

      <button class="btn btn-primary" type="button" id="secondDropdownBtn">&#9660</button>
    </div>

    <div class="d-flex" id="searchBoxRow">
      <input class="form-control mr-sm-2" id="inlineFormInput" val="" type="search" placeholder="Search Posters" aria-label="Search Posters">
      <button class="btn btn-primary" id="posterSearchButton" type="submit">Search</button>
    </div>
  </div>
</div>

JavaScript

let trigger = document.getElementById('categoryDropdown');

$(document).on("click", "#secondDropdownBtn", function(e) {
  bootstrap.Dropdown.getOrCreateInstance(trigger).toggle();
});

$(document).on("click", ".dropdown-item", function(event) {
  bootstrap.Dropdown.getOrCreateInstance(trigger).toggle();
});

$(document).on("click", "#posterSearchButton", function(event) {
  bootstrap.Dropdown.getOrCreateInstance(trigger).hide();
});