Ferramenta Mostrar/Ocultar em Link com Jquery
Olá Pessoal, Estar aqui mais um tutorial e um Script Incrível, este Script realmente é muito bom, eu descobri este Script através de muita busca, achei muitos botões mostrar/ocultar, mas eles são sem graça e não dá pra impressionar o Leitor, e tem alguns que nem funcionam mais. Esse Script é baseado é um código único da própria Google, o que nós traz uma segurança e certeza de qualidade, como você viu na demonstração acima, o script é realmente muito bom, e o que é melhor, se você já adicionou este código uma vez, não precisa adicionar novamente, ele funciona com todos os scripts de uma vez só, deixando sua página mais leve.
1. ADICIONAR A BIBLIOTECA JAVASCRIPT:
1. ADICIONAR A BIBLIOTECA JAVASCRIPT:
1º – Acesse o Painel do seu Blog e clique na Guia Modelo.
2º – Depois clique no Botão Editar HTML.
3º – Segure as teclas CTRL + F (atalho de busca na página) e Procure por:
</head>
4º – E ACIMA dele cole o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function()
{
//hide the all of the element with class msgbody
$(".msgbody").hide();
//toggle the componenet with class msgbody
$(".msghead").click(function()
{
$(this).next(".msgbody").slideToggle(600);
});
});
</script>
6º – Em seguida segure as teclas CTRL + F novamente e Procure por:
]]></b:skin>
7º – E ACIMA dele cole o seguinte código:
.msghead {
cursor: pointer;
color: #006B75;
padding: 0px 0 10px 28px;
font-size: 13px;
}
.msgbody {
padding: 10px;
}
8º – E depois clique em Salvar Modelo.
2. COMO USAR A FERRAMENTA:
Para usar a ferramenta basta apenas usar o seguinte código:
<div class='msghead'>[+/-] Mostrar/Ocultar </div><div class='msgbody'>
TEXTO QUE DESEJA OCULTAR
</div>