Troca exibição de produtos

by richarddias

HTML

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<div class="elemento">
  <label>Grupo A - <a href="#" data-id-grupo="10">Exibir produtos</a></label>
  <ul class="produtos oculto">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
  </ul>
</div>

CSS

.produtos.oculto {
  display: none;
}

JavaScript

$('.elemento a').on('click', function()
{
	var $elemento = $(this);
  ///Você pega o ID do grupo ou qualquer informação que desejar do elemento
  var idGrupo = $elemento.data('id-grupo');

	///Se necessário nesse momento pode-se fazer a
  //requisição ajax dos produtos do grupo, caso
  //eles ainda não tenham sido carregados, ou
  //necessite de atualização

	var $produtos = $elemento.parent().siblings('.produtos');
  $produtos.toggleClass('oculto');
  
  if ($produtos.hasClass('oculto'))
  {
  	$elemento.html('Exibir produtos - Grupo ' + idGrupo);
  }
  else
  {
  	$elemento.html('Ocultar produtos - Grupo ' + idGrupo);
  }
});