Explore Current Rules

<div class="custom-multiselect">
      <div class="select-box" onclick="toggleDropdown(this)">
        <span>Filter by Agency / IDAPA</span>
        <div class="arrow">
          <img
            src="https://adminrules.idaho.gov/wp-content/uploads/2025/05/angle_down.svg"
            alt=""
          />
        </div>
      </div>
      <div class="options-box">
        <label
          ><input type="checkbox" value="option1" /><span></span>
          <p>(01) Accountancy, Board of</p></label
        >
        <label
          ><input type="checkbox" value="option2" /><span></span>
          <p>(38) Administration, Department of</p></label
        >
        <label
          ><input type="checkbox" value="option3" /><span></span>
          <p>(62) Administrative Hearings, Office of</p></label
        >
        <label
          ><input type="checkbox" value="option4" /><span></span>
          <p>(44) Administrative Rules Coordinator, Office of the</p></label
        >
        <label
          ><input type="checkbox" value="option4" /><span></span>
          <p>(02) Agriculture, Department of</p></label
        >
        <label
          ><input type="checkbox" value="option4" /><span></span>
          <p>(40) Arts, Idaho Commission of the</p></label
        >
        <label
          ><input type="checkbox" value="option4" /><span></span>
          <p>(03) Athletic Commission, State</p></label
        >
        <label
          ><input type="checkbox" value="option4" /><span></span>
          <p>(04) Attorney General, Office of the</p></label
        >
        <label
          ><input type="checkbox" value="option4" /><span></span>
          <p>(53) Barley Commission, Idaho</p></label
        >
        <label
          ><input type="checkbox" value="option2" /><span></span>
          <p>(38) Administration, Department of</p></label
        >
        <label
          ><input type="checkbox" value="option3" /><span></span>
          <p>(62) Administrative Hearings, Office of</p></label
        >
        <label
          ><input type="checkbox" value="option4" /><span></span>
          <p>(44) Administrative Rules Coordinator, Office of the</p></label
        >
      </div>
    </div>

 .custom-multiselect {
      position: relative;
      width: 100%;
    }
    .select-box {
      border: 1px solid #bbbbbb;
      padding: 7px 10px;
      background: #fff;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 12px;
      font-family: "Montserrat";
    }
    .options-box {
      display: none;
      position: absolute;
      width: 100%;
      background: #fff;
      border: 1px solid #bbb;
      max-height: 406px;
      overflow-y: auto;
      z-index: 999;
      border-radius: 12px;
      padding: 10px 12px 12px 12px;
      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
      top: calc(100% + 8px);
    }
    .options-box label {
      display: block;
      padding: 8px;
      cursor: pointer;
      color: #696969;
      font-size: 16px;
      font-weight: 400;
      font-family: "Montserrat";
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .options-box label:hover {
      background: #ffeecf;
    }
    .custom-multiselect.active .options-box {
      display: block;
    }

    .options-box::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #e1e1e1;
    }

    .options-box::-webkit-scrollbar {
      width: 5px;
      background-color: #e1e1e1;
    }

    .options-box::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #696969;
    }

    .options-box label span {
      border-radius: 4px;
      border: 1px solid #1d2a20;
      width: 24px;
      height: 24px;
      position: relative;
      display: block;
    }
    .options-box label span:after {
      border: solid #ffeecf;
      position: absolute;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      border-width: 0 0 2px 2px !important;
      height: 6px;
      width: 13px;
      margin: 0;
      position: absolute;
      content: "";
        top: 7px;
      left: 5px;
      display: none;
    }
    .options-box label input {
      opacity: 0;
      position: absolute;
      width: 24px;
      height: 24px;
      margin: 0;
    }
    .options-box label input:checked + span:after {
      display: block;
    }
    .options-box label input:checked + span {
      background-color: #2e4449;
    }
    .select-box > span {
      color: #878787;
      font-family: "Montserrat";
      font-size: 16px;
    }
    .options-box label p {
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

function toggleDropdown(el) {
  const parent = el.closest('.custom-multiselect');
  parent.classList.toggle('active');
}

window.addEventListener('click', function (e) {
  document.querySelectorAll('.custom-multiselect').forEach(function (dropdown) {
    if (!dropdown.contains(e.target)) {
      dropdown.classList.remove('active');
    }
  });
});