Estou com esse código abaixo,
<?php include "conexao.php"; ?>
<div id="produtos-content">
<!-- Listando os Categorias -->
<?php
$nome_cat = $_POST['nome_cat'];
$img_cat = $_POST['img_cat'];
$query_categoria = mysql_query("SELECT * FROM categoria");
while($res = mysql_fetch_array($query_categoria)){
?>
<div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">
<a class="cat-link" href="javascript:;" title="<?php echo $res['nome_cat']; ?>">
<img style="position:relative; top:50%; transform:translateY(-50%);"
src="img_cate/<?php echo $res['img_cat']; ?>" width="100"
title="<?php echo $res['nome_cat']; ?>" />
</a>
<div style="background:#2f2140; ; width:880px;z-index:999;border-radius:25px;" class="single-cat">
<h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>
<div style="margin-left:357px;width:50px;" class="cat-links">
<a class="close-btn" href="javascript:;" title="Voltar">
<img src="img/fechar.jpg" />
</a>
</div>
<?php
$codigo = $_POST['codigo'];
$img_prod = $_POST['img_prod'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$nome_cat = $_POST['nome_cat'];
$query_produtos = mysql_query("SELECT * FROM produtos") or die(mysql_error());
while($res = mysql_fetch_array($query_produtos)){
?>
<div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">
<a class="song-link" href="javascript:;" title="">
<img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['img_prod']; ?>" width="100" title="<?php echo $res['titulo']; ?>" />
</a>
<div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">
<div style="width:50px;margin-left:300px;" class="song-links">
<a class="close-btn" href="javascript:;" title="Voltar">
<img src="img/fechar.jpg" />
</a>
<div class="song-sides">
<img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['img_prod']; ?>" width="369" />
</div>
</div>
<h1> <?php echo $res['titulo']; ?> </h1>
<div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px;">
<p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">
<?php echo nl2br($res['descricao']); ?>
</p>
<div class="jspContainer" style="width: 100px; height: auto;">
<div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">
</div></div>
</div>
<span class="song-sides left-side"></span>
</div>
</div>
<?php } ?>
</div>
</div>
<?php
}
?>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".single-cat .close-btn").click(function(){
jQuery(this).parent().parent().fadeOut();
});
jQuery(".single-song .close-btn").click(function(){
jQuery(this).parent().parent().fadeOut();
});
});
</script>
e precisando da ajuda dos amigos para fazer o href="javascript:;" da DIV id="cats-list", trazer somente os produtos referente a Categoria selecionada, abrindo-os na DIV id="songs-list".
No momento ao clicar em qualquer uma das duas categorias cadastradas, me traz todos os produtos cadastrados na tabela "PRODUTOS".
Já tentei usar o código abaixo (Que funciona perfeito em PHP),
<?php
include "conexao.php";
$nome_cat = $_GET['nome_cat'];
$query_produtos = mysql_query("SELECT * FROM produtos WHERE nome_cat = '$nome_cat'") or die(mysql_error());
while($res = mysql_fetch_array($query_produtos)){
$codigo = $_POST['codigo'];
$img_prod = $_POST['img_prod'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$nome_cat = $_POST['nome_cat'];
?>
para buscar somente os produtos referentes a categoria selecionada e enviada via GET na DIV id="songs-list", mas sem sucesso.
Acredito que tenha que criar um evento para essa function, mas sou muito leigo em JavaScript, e conto com a ajuda dos amigos se possível.
Problema resolvido com o código abaixo:
Com a ajuda do amigo @Givanildo R. de Oliveira, conseguimos solucionar o problema e trazer somente os produtos referentes a Categoria selecionada.
Abaixo o código funcionando:
<?php include "conexao.php"; ?>
<div id="produtos" class="sections full-width-wrapper bg_4">
<div class="centered-wrapper">
<div class="section-header">
<?php include 'menu_pags.php';?>
</div>
<div id="produtos-content">
<!-- Listando os Categorias -->
<?php
$nome_cat = $_POST['nome_cat'];
$img_cat = $_POST['img_cat'];
$query_categoria = mysql_query("SELECT * FROM categoria");
while($res = mysql_fetch_array($query_categoria)){
?>
<div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">
<a class="cat-link" href="?nome_cat=<?php echo $res['nome_cat']; ?>#produtos" title="<?php echo $res['nome_cat']; ?>">
<img style="position:relative; top:50%; transform:translateY(-50%);"
src="img_cate/<?php echo $res['img_cat']; ?>" width="100"
title="<?php echo $res['nome_cat']; ?>" />
</a>
<div style="background:#2f2140; ; width:880px;z-index:999;border-radius:25px; <?php echo $res['nome_cat']==$_GET['nome_cat'] ? 'display:block;' : ''; ?>" class="single-cat">
<h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>
<div style="margin-left:357px;width:50px;" class="cat-links">
<a class="close-btn" href="javascript:;" title="Voltar">
<img src="img/fechar.jpg" />
</a>
</div>
<!-- Listando os produtos -->
<?php
$nome_cat = $_GET['nome_cat'];
$query_produtos = mysql_query("SELECT * FROM produtos WHERE nome_cat = '$nome_cat'") or die(mysql_error());
while($res = mysql_fetch_array($query_produtos)){
$codigo = $_POST['codigo'];
$img_prod = $_POST['img_prod'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$nome_cat = $_POST['nome_cat'];
?>
<div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">
<a class="song-link" href="javascript:;" title="">
<img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['img_prod']; ?>" width="100" title="<?php echo $res['titulo']; ?>" /></a>
<div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">
<div style="width:50px;margin-left:300px;" class="song-links">
<a class="close-btn" href="javascript:;" title="Voltar">
<img src="img/fechar.jpg" />
</a>
<div class="song-sides">
<img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['img_prod']; ?>" width="369" />
</div>
</div>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<h1> <?php echo $res['titulo']; ?> </h1>
<div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px;">
<p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">
<?php echo nl2br($res['descricao']); ?>
</p>
<div class="jspContainer" style="width: 100px; height: auto;">
<div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">
</div></div></div>
<span class="song-sides left-side"></span>
</div>
</div>
<?php
}
?>
</div>
</div>
<?php
}
?>
</div>
</div></div></div>
Espero que possa ajudar a outros usuários com o mesmo problema.