Directorio de Negocios Las Marías

Directorio de Negocios

  <!-- Filtros -->
<div id="filters">
  <button class="filter-btn" data-filter="all">Todos</button>
  <button class="filter-btn" data-filter="Restaurante">Restaurantes</button>
  <button class="filter-btn" data-filter="Tienda">Tiendas</button>
  <button class="filter-btn" data-filter="Servicio">Servicios</button>
</div>

<!-- Lista de negocios -->
<div id="business-list">
  <div class="business-item" data-category="Restaurante">
    <h3>Negocio 1</h3>
    <p>Descripción corta</p>
  </div>
  <div class="business-item" data-category="Tienda">
    <h3>Negocio 2</h3>
    <p>Descripción corta</p>
  </div>
  <div class="business-item" data-category="Servicio">
    <h3>Negocio 3</h3>
    <p>Descripción corta</p>
  </div>
</div>

<!-- Filtro JS -->
<script>
  const filterButtons = document.querySelectorAll('.filter-btn');
  const items = document.querySelectorAll('.business-item');

  filterButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      const filter = btn.getAttribute('data-filter');
      items.forEach(item => {
        if (filter === 'all' || item.getAttribute('data-category') === filter) {
          item.style.display = 'block';
        } else {
          item.style.display = 'none';
        }
      });
    });
  });
</script>

<style>
  #filters { margin-bottom: 20px; }
  .filter-btn { margin-right: 10px; }
  .business-item { border: 1px solid #ccc; padding: 10px; margin: 10px; }
</style>