greenleebt/MiamiAlumniChicagolandBusinessDirectory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Collapsible industry filter on mobile

Browse source
This commit is contained in:
Ozzy (AI Assistant) 2026-07-27 18:44:31 +00:00
parent 61eb84d38e
commit a28acf7c13
2 changed files with 78 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -29,6 +29,11 @@
<div class="search-wrapper"> <div class="search-wrapper">
<input type="text" id="searchInput" placeholder="Search by name, industry, or location…" aria-label="Search businesses"> <input type="text" id="searchInput" placeholder="Search by name, industry, or location…" aria-label="Search businesses">
</div> </div>
<button class="filter-toggle" id="filterToggle" aria-expanded="true" onclick="toggleFilters()">
<span class="filter-toggle-label">Industry</span>
<span class="filter-toggle-badge" id="filterBadge">All</span>
<svg class="filter-toggle-arrow" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
</button>
<div class="industry-filters" id="industryFilters"> <div class="industry-filters" id="industryFilters">
<button class="industry-btn active" data-filter="all">All</button> <button class="industry-btn active" data-filter="all">All</button>
</div> </div>
@ -267,7 +272,14 @@
// ─── Initial Render ─────────────────────────────────────────────── // ─── Initial Render ───────────────────────────────────────────────
render(); render();
</script>
function toggleFilters() {
const container = document.getElementById('industryFilters');
const toggle = document.getElementById('filterToggle');
const isOpen = toggle.getAttribute('aria-expanded') === 'true';
container.classList.toggle('collapsed', isOpen);
toggle.setAttribute('aria-expanded', !isOpen);
}</script>
</body> </body>
</html> </html>

66
style.css
View file

@ -373,4 +373,68 @@ main {
.filter-bar { display: none; } .filter-bar { display: none; }
.business-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; } .business-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
.site-header { break-after: avoid; padding: 1rem; } .site-header { break-after: avoid; padding: 1rem; }
} }
/* ===== Industry Filter Toggle (Mobile) ===== */
.filter-toggle {
display: none;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.8rem;
border: 1.5px solid var(--light-gray);
border-radius: 6px;
background: var(--white);
font-size: 0.85rem;
font-family: inherit;
font-weight: 600;
color: var(--dark-gray);
cursor: pointer;
transition: all 0.15s;
width: 100%;
justify-content: space-between;
}
.filter-toggle:hover {
border-color: var(--miami-red-light);
}
.filter-toggle-badge {
background: var(--miami-red);
color: var(--white);
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
border-radius: 100px;
font-weight: 600;
}
.filter-toggle-arrow {
transition: transform 0.2s;
color: var(--medium-gray);
}
.filter-toggle[aria-expanded="true"] .filter-toggle-arrow {
transform: rotate(180deg);
}
/* Only show toggle and hide filters behind it on mobile */
@media (max-width: 768px) {
.filter-toggle {
display: flex;
}
.industry-filters {
display: flex !important;
max-height: 500px;
overflow: hidden;
transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
opacity: 1;
margin-top: 0.5rem;
}
.industry-filters.collapsed {
max-height: 0 !important;
opacity: 0;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
}