Ir ao conteúdo
  • Cadastre-se
FaridChaud

HTML Mostrar itens apenas quando selecionado o filtro (HTML)

Recommended Posts

Boa tarde galera,

sou novato aqui então espero que não esteja escrevendo um tópico repetido, com uma dúvida já solucionada, preciso de uma ajuda com o seguinte código:

 

<!--==========================

Portfolio Section

============================-->

<section id="portfolio">

<div class="container wow fadeInUp">

<div class="section-header">

<h3 class="section-title">TESTE</h3>

<p class="section-description">mensagem abaixo do teste.</p>

</div>

<div class="row">

<div class="col-lg-12">

<ul id="portfolio-flters">

<li data-filter=".filter-app" class="filter-active">Apresentação</li>

<li data-filter=".filter-card">Serviços</li>

<li data-filter=".filter-logo">Disponibilidade</li>

<li data-filter=".filter-web">Tarifas</li>

</ul>

</div>

</div>

<div class="row" id="portfolio-wrapper">



<div class="col-lg-3 col-md-6 portfolio-item filter-app">

<a href="">

<img src="img/about-img.jpg" alt="">

<div class="details">

<h4>App 1</h4>

<span>Alored dono par</span>

</div>

</a>

</div>



<div class="col-lg-3 col-md-6 portfolio-item filter-web">

<a href="">

<img src="img/about-img.jpg" alt="">

<div class="details">

<h4>Web 2</h4>

<span>Alored dono par</span>

</div>

</a>

</div>

<div class="col-lg-3 col-md-6 portfolio-item filter-card">

<a href="">

<img src="img/about-img.jpg" alt="">

<div class="details">

<h4>Card 1</h4>

<span>Alored dono par</span>

</div>

</a>

</div>

<div class="col-lg-3 col-md-6 portfolio-item filter-logo">

<a href="">

<img src="img/about-img.jpg" alt="">

<div class="details">

<h4>Logo 1</h4>

<span>Alored dono par</span>

</div>

</a>

</div>

</div>

</div>

</section><!-- #portfolio -->

 

Tenho um filtro com 4 opções (Apresentação, Serviços, Disponibilidade e Tarifas), quando clico em cada um, ele me mostra o item associado a ele, porém antes de clicar no filtro aparecem todos os itens de todos os filtros que eu vier a fazer, queria que eles não aparecessem até eu clicar em alguma opção, suspeito que seja algo que devo colocar junto do class="row" porém não estou conseguindo saber o que... Podem me ajudar a sumir os quadros até que eu clique em um item de opção?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sua dúvida não está clara, pra mim. Se tu responder o seguinte, talvez, eu consiga te ajudar:

  • O filtro que você se refere é um elemento select?
  • Está tentando fazer isso com JS puro?
    • Se "sim", mostra pra gente o código que você está utilizando.
    • Se "não", nos diga o que está usando.

Ainda assim...

...escrevi esse snippet, pra ver se esse é o resultado esperado por você: https://jsfiddle.net/f6k1zdpe/1/

Compartilhar este post


Link para o post
Compartilhar em outros sites

@FaridChaud Basicamente você pode fazer isso com  jQuery  e php.

 

Leia este artigo que escreve a um tempo a trás:

https://coderdif.wordpress.com/2014/12/01/filtro-de-dados-por-checkbox-com-jquery/

 

Ele está bem explicado, só o exemplo online que está fora do ar no momento. Mas as explicações linha a linha são mais do que suficientes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×