JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<div class="sorting-section">
    <label for="sort-control">Sort by:</label>
    <select id="sort-control" aria-controls="search-results" class="sorting-options">
        <option value="relevance">Relevance</option>
        <option value="date">Date</option>
        <option value="popularity">Popularity</option>
    </select>
</div>

<div class="search-results-container">
    <div id="search-results" aria-live="polite" aria-relevant="additions removals">
        <!-- Search results will be displayed here -->
    </div>
    
    <div class="results-number-limit">
        <label for="results-limit">Results per page:</label>
        <select id="results-limit" aria-controls="search-results" class="limit-options">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
        </select>
    </div>
</div>

CSS

/* Initially hide the radio-container */
.radio-container {
  display: none;
}

/* Show the dropdown on mobile screens */
@media (max-width: 768px) {
  .dropdown-container {
    display: block;
  }
  .radio-container {
    display: none;
  }
}

JavaScript

const categoryDropdown = document.getElementById("categoryDropdown");
const radioContainer = document.querySelector(".radio-container");

categoryDropdown.addEventListener("change", () => {
  const selectedValue = categoryDropdown.value;
  if (selectedValue === "All") {
    radioContainer.style.display = "none";
  } else {
    radioContainer.style.display = "block";
  }
});