HTML Mostrar itens apenas quando selecionado o filtro (HTML)

FaridChaud · 15 de fevereiro de 2018

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?

groutmoustache · 15 de fevereiro de 2018

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/