Web Designer Wall

Snippets Collapsible

Bootstrap 5 Property Search Form with Collapse Filters

A property search bar with a status dropdown, location field and a collapsible advanced filter panel with selects and amenity chips.

Bootstrap 5 No jQuery Jul 2020 3.5K views 

<section class="wdw-stage wdw-aurora">
  <div class="container" style="max-width: 860px;">
    <div class="text-center mb-4">
      <!-- light-on-aurora variant of the library eyebrow -->
      <span class="wdw-eyebrow ps-eyebrow">Property search</span>
      <h1 class="h2 fw-bold text-white ps-title mt-2 mb-0">An easier way to find your home</h1>
    </div>
    <form class="wdw-card p-3 p-md-4" id="ps-form" novalidate>
      <div class="row g-2 align-items-stretch">
        <div class="col-md-auto">
          <div class="dropdown h-100">
            <button class="btn btn-outline-secondary text-body-emphasis rounded-pill w-100 px-4 justify-content-between dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="ps-status-btn"><span id="ps-status-label">Any status</span></button>
            <ul class="dropdown-menu p-2" id="ps-status-menu">
              <li><button class="dropdown-item rounded-3 active" aria-current="true" type="button" data-value="Any status">Any status</button></li>
              <li><button class="dropdown-item rounded-3" type="button" data-value="For sale">For sale</button></li>
              <li><button class="dropdown-item rounded-3" type="button" data-value="For rent">For rent</button></li>
              <li><button class="dropdown-item rounded-3" type="button" data-value="Sold">Recently sold</button></li>
            </ul>
          </div>
        </div>
        <div class="col-md">
          <div class="position-relative">
            <label for="ps-address" class="visually-hidden">Address, city or zip</label>
            <svg class="ps-pin" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.800 12 21 12 21Z"/><circle cx="12" cy="9.500" r="2.500"/></svg>
            <input type="text" class="form-control ps-address" id="ps-address" placeholder="Street, city, state or zip">
          </div>
        </div>
        <div class="col-md-auto d-grid">
          <button type="submit" class="btn btn-primary rounded-pill px-4">Search</button>
        </div>
      </div>

      <button class="btn btn-link text-decoration-none fw-semibold px-1 mt-2 ps-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#ps-filters" aria-expanded="true" aria-controls="ps-filters">
        Advanced filters
        <svg class="ps-caret" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
      </button>

      <div class="collapse show" id="ps-filters">
        <div class="row g-3 pt-3 mt-1 border-top">
          <div class="col-6 col-md-3"><label class="form-label small fw-semibold" for="ps-type">Type</label>
            <select class="form-select" id="ps-type"><option>Any</option><option>House</option><option>Apartment</option><option>Townhouse</option><option>Land</option></select></div>
          <div class="col-6 col-md-3"><label class="form-label small fw-semibold" for="ps-beds">Bedrooms</label>
            <select class="form-select" id="ps-beds"><option>Any</option><option>1+</option><option>2+</option><option>3+</option><option>4+</option></select></div>
          <div class="col-6 col-md-3"><label class="form-label small fw-semibold" for="ps-min">Min price</label>
            <select class="form-select" id="ps-min"><option>No min</option><option>$100k</option><option>$250k</option><option>$500k</option></select></div>
          <div class="col-6 col-md-3"><label class="form-label small fw-semibold" for="ps-max">Max price</label>
            <select class="form-select" id="ps-max"><option>No max</option><option>$500k</option><option>$1M</option><option>$2M</option></select></div>
          <div class="col-12 d-flex flex-wrap gap-2 align-items-center">
            <span class="small fw-semibold me-1">Must have</span>
            <input type="checkbox" class="btn-check" id="am1" autocomplete="off"><label class="btn btn-outline-secondary btn-sm rounded-pill px-3" for="am1">Garage</label>
            <input type="checkbox" class="btn-check" id="am2" autocomplete="off"><label class="btn btn-outline-secondary btn-sm rounded-pill px-3" for="am2">Pool</label>
            <input type="checkbox" class="btn-check" id="am3" autocomplete="off"><label class="btn btn-outline-secondary btn-sm rounded-pill px-3" for="am3">Garden</label>
            <input type="checkbox" class="btn-check" id="am4" autocomplete="off"><label class="btn btn-outline-secondary btn-sm rounded-pill px-3" for="am4">Pet friendly</label>
            <button type="reset" class="btn btn-link btn-sm text-decoration-none ms-auto text-body-secondary">Clear all</button>
          </div>
        </div>
      </div>
    </form>
    <p class="text-center small fw-semibold text-white mt-3 mb-0 ps-result" id="ps-result" aria-live="polite">2,481 homes available near you</p>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More collapsible snippets