No tutorial abaixo estará aprendendo a como adicionar um Botão em um Efeito hover de quando passar o mouse sobre o titulo da categoria irá aprecer um Botão de "-" para Minimizar a Categoria e logo após terá o botão "+" para Maximizar

--> Tutoriais LF Design <--
[Tutorial] Minimizar e Maximizar categoria

1º - Inserindo o código JavaScript

Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos códigos JavaScript

Depois você irá clicar em "Criar um novo JavaScript"



Título - Terá de colocar um título para a página, de forma a poder identifica-lo na lista de páginas JavaScript do Painel de Controle;

Investimento - Escolha a opção "Em todas as páginas", para que a função não apresente erros na posição da coluna do widget;

Código JavaScript - Neste campo deverá adicionar o código que vai ser disponibilizado abaixo

Confirmar - Por fim, após adicionar o código, terá de clicar neste botão para salvar a criação. Se você clicar em um outro botão ou em uma outra seção, as mudanças não serão validadas.


2º - Código

Código:

$(function(){$('.main-head:has(.page-title)').prepend('<a class="collapse tcatCollapse" id="collapse_c_cat1" href="#top" style="visibility:hidden;float: right;"><img src="http://i.imgur.com/fJz0Zls.png" alt=""></a>');$('.main-head:has(.page-title)').mouseover(function(){$(this).find('a.collapse[id]').css('visibility','visible')});$('.main-head:has(.page-title)').mouseout(function(){$(this).find('a.collapse[id]').css('visibility','hidden')});$('.main-head a.collapse[id]').click(function(e){e.preventDefault()});$('.main-head a.collapse[id]').attr('onclick'," if($(this).closest('.main-head').next('.main-content:first').css('display')=='none') {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','0',10,0); $(this).closest('.main-head').next('.main-content:first').slideDown(500);$(this).find('img').attr('src','http://i.imgur.com/fJz0Zls.png');$(this).closest('.main-head');$(this).closest('.main-head').removeClass('collapsed')} else {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','1',10,0); $(this).closest('.main-head').next('.main-content:first').slideUp(500);$(this).find('img').attr('src','http://i.imgur.com/gNAasKx.png'); $(this).closest('.main-head').addClass('collapsed');}");$(document).ready(function(){$('.main-head a.collapse[id]').closest('.main-head').each(function(){if(my_getcookie($(this).find('.page-title').text()+'_ct')=='1'){$(this).next('.main-content:first').css('display','none');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/gNAasKx.png');$(this).closest('.main-head').addClass('collapsed')}else{$(this).next('.main-content:first').css('display','block');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/fJz0Zls.png');$(this).closest('.main-head').removeClass('collapsed')}})})});

3º - Resultado

• Sem o Mouse em Cima
  
  

• Com o Mouse em Cima
  
  

• Posso alterar a Imagem de - e de + ??
  Sim poderá alterar mais recomendo que peça um suporte no fórum para que nós alteramos caso não saiba editar o código

---

© LF Design

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Tutorial] Minimizar e Maximizar categoria

Tutorial Aprovado & Fechado