JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<!-- Container for the dropdowns -->
<div class="dropdown-container">
  <!-- First Dropdown for Min Cap -->
  <div class="dropdown">
    <sup>Min Capacity</sup>
    <div class="dropdown-header update-header" id="minCapHeader">Any<span class="caret">&#9660;</span></div>
    <div id="capNums" class="dropdown-options dropHeight">
      <div class="option">Any</div>
      <!-- generated by js -->
    </div>
  </div>

  <!-- Second Dropdown for AV Required -->
  <div class="dropdown">
    <sup>&nbsp;</sup>
    <div class="dropdown-header" id="avReqHeader">AV Required <span class="caret">&#9660;</span></div>
    <div class="dropdown-options checkboxes stay-open">
      <div class="checkbox-option"><label><input type="checkbox" id="opt1">Option 1</label></div>
      <div class="checkbox-option"><label><input type="checkbox" id="opt2">Option 2</label></div>
      <div class="checkbox-option"><label><input type="checkbox" id="opt3">Option 3</label></div>
      <div class="checkbox-option"><label><input type="checkbox" id="opt4">Option 4</label></div>
      <div class="checkbox-option"><label><input type="checkbox" id="opt5">Option 5</label></div>
    </div>
  </div>
</div>









<table id="roomTable">
  <thead>
    <tr>
      <th>Room</th>
      <th>Capacity/Type</th>
      <!-- <th>Interior/Interior</th> -->
      <th>AV Capabilities</th>
      <th>Display Size</th>
      <th>Photo</th>
    </tr>
  </thead>
  <tbody id="roomRows">
    <tr data-fl="8" data-maxcap="16" data-maxcapV="15" data-teams="n" data-ss="y" data-wiredwireless="y" data-wb="n" data-roompc="y" data-screenSize="82">
      <td class="roomNum">802</td>
      <td class="roomCap">16/15 (with video)</td>
      <td>
        <ul class="roomAv">
          <li class="msteams"></li>
          <li class="selfServ">Self Service</li>
          <li class="wired">Wireless & Wired</li>
          <li class="digWB"></li>
          <li class="roomPc">In-Room PC</li>
        </ul>
      </td>
      <td...

CSS

/* Base styles */
.dropdown-container {
    font-family: Arial, sans-serif;
    margin: 20px;
}

.dropdown {
    display: inline-block; /* Display dropdowns inline */
    vertical-align: top;
    margin-right: 20px; /* Space between dropdowns */
    position: relative;
}

.dropdown-header {
    background-color: #f2f2f2;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 6px; /* Rounded corners for the dropdown header */
    user-select: none;
    display: flex;
    justify-content: space-between; /* Space between text and caret */
    align-items: center; /* Align items vertically */
    width: 100%;
    box-sizing: border-box; /* Padding and border included in width */
    gap:8px;
}

.caret {
    transition: transform 0.3s ease; /* Smooth transition for flipping */
}

.caret.active {
    transform: rotate(180deg); /* Flip the caret when active */
}

.dropdown-options {
    display: none; /* Hidden by default */
    position: absolute;
    width: calc(100% - 2px); /* Width adjusted for border */
    z-index: 1;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    background-color: white;
    border: 1px solid #ccc;
}

.option, .checkbox-option label {
    padding: 10px;
    display: block; /* Makes the entire area clickable */
    cursor: pointer;
}

.option:hover, .checkbox-option label:hover {
    background-color: #140be3;
    color: #fff;
}

.checkbox-option input {
    margin-right: 10px;
}

.header-checkbox {
    margin-left: 5px; /* Space between the label text and checkbox */
    vertical-align: middle; /* Aligns checkbox with text */
    cursor: pointer;
}

.dropdown-header.open {
    background-color: #eee; /* Light grey background when open */
    border-color: #aaa; /* Darker border when open */
    border-radius: 6px 6px 0 0;
}

.dropdown-header.open + .dropdown-options {
    display: block; /* Show options when header has 'open' class */
}
.dropdown-header.avHighlight {
    background-color: #140be3; /* Change...

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  enableSelectBoxes();
  initializeDropdowns();
  initializeAvHighlight();
});

function enableSelectBoxes() {
  var selectBoxes = document.querySelectorAll('div.selectBox');

  selectBoxes.forEach(function(selectBox) {
    var firstOption = selectBox.querySelector('div.selectOptions > span.selectOption:first-child');
    var selectedSpan = selectBox.querySelector('span.selected');
    var selectArrow = selectBox.querySelector('span.selectArrow');

    // Set the displayed value and the value attribute to the first option's value
    selectedSpan.innerHTML = firstOption.innerHTML;
    selectBox.setAttribute('value', firstOption.getAttribute('value'));

    // Event listener for clicking on the box to show/hide options
    selectedSpan.addEventListener('click', toggleOptions);
    if (selectArrow) {
      selectArrow.addEventListener('click', toggleOptions);
    }

    // Function to toggle the display of options
    function toggleOptions() {
      var optionsDiv = selectBox.querySelector('div.selectOptions');
      if (optionsDiv.style.display === 'block') {
        optionsDiv.style.display = 'none';
      } else {
        optionsDiv.style.display = 'block';
      }
    }

    // Setup click event for all options within this selectBox
    var options = selectBox.querySelectorAll('span.selectOption');
    options.forEach(function(option) {
      option.addEventListener('click', function() {
        var optionsDiv = this.parentNode;
        optionsDiv.style.display = 'none'; // Hide options list
        selectBox.setAttribute('value', this.getAttribute('value')); // Set the value
        selectBox.querySelector('span.selected').innerHTML = this.innerHTML; // Update the displayed value
      });
    });
  });
}

function initializeDropdowns() {
  const minCapOptionsContainer = document.querySelector('#minCapHeader + .dropdown-options');

  // Function to create options dynamically
  function...