I'm having trouble implementing a category filter on my site, so when I click on a particular category, it's only visible.
I've even been able to create a search filter, based on input
typed, but now I want to do that when I filter the user by clicking the Menu category.
Below is the Javascript
that I used to implement the search with input
, I was thinking of using it, but I would like to receive input
when user clicks the category menu.
$('.btn').on('click', function(){
var cat = $(this).attr('data-cad')
if(cat == 'todos'){
$('.cursos div').show()
}else{
$('.cursos div').each(function(){
if(!$(this).hasClass(cat)){
$(this).hide()
}else{
$(this).show()
}
})
}
})
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Conteudos</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/geral.css">
<!-- Javascript -->
<script type="text/javascript" src="javascript/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="javascript/filtros.js"></script>
<script type="text/javascript" src="javascript/filter-cat.js"></script>
</head>
<body>
<div id="corpo">
<!--Area Total-->
<div id="area">
<!--Barra de Pesquisa-->
<div id="barrapesquisa">
<input type="text" id="txtEBusca" placeholder="Pesquisar..."/>
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<!-- Fim da Barra de pesquisa-->
<!-- Filtro -->
<nav id="filtro">
<ul>
<p>Por Categorias</p>
<li><div id="cordomenu1"></div>   <a href="#" clas="btn" data-cat="tec">Tecnologia</a> </li>
<li><div id="cordomenu2"></div>   <a href="#" clas="btn" data-cat="gest">gestao</a> </li>
<li> <div id="cordomenu3"></div>   <a href="#" clas="btn" data-cat="neg" >Negocios</a> </li>
</ul>
</nav><!--Fim Filtro -->
<!-- Container -->
<div id="container">
<div id="curso">
<div class="curso"> <!-- Curso-->
<div class="tec"> <!--Categoria-->
<div class="gallery-item">
<div class="content-gallery">
<h3>teste</h3>
<h4>Tendências e desafios no mundo corporativo</h4>
<div class="gestao"></div>
<div class="videos"></div>
</div>
</div> <!--Fim do Classe categoria-->
</div> <!--Fim do Classe Curso-->
</div><!--Fim do Curso-->
<div id="curso">
<div class="curso"> <!-- Curso-->
<div class="neg"> <!--Categoria-->
<div class="gallery-item">
<div class="content-gallery">
<h3>teste</h3>
<h4>Tendências e desafios no mundo corporativo</h4>
<div class="gestao"></div>
<div class="videos"></div>
</div>
</div> <!--Fim do Classe categoria-->
</div> <!--Fim do Classe Curso-->
</div><!--Fim do Curso-->
<div id="curso">
<div class="curso"> <!-- Curso-->
<div class="gest"> <!--Categoria-->
<div class="gallery-item">
<div class="content-gallery">
<h3>teste</h3>
<h4>Tendências e desafios no mundo corporativo</h4>
<div class="gestao"></div>
<div class="videos"></div>
</div>
</div> <!--Fim do Classe categoria-->
</div> <!--Fim do Classe Curso-->
</div><!--Fim do Curso-->
</div><!--Fim Do container-->
</div><!--Fim Da Area-->
</div><!--Fim do Corpo -->
</body>
</html>