Efeito Toggle com CSS e JQuery

Este efeito funciona para deixar a exibição do conteúdo pratico e limpo. Eu sei que há um monte de tutoriais sobre o efeito alternar lá fora já, mas quando eu estava aprendendo o básico do jQuery eo efeito de alternância, eu tinha muita dificuldade em encontrar recursos sobre como mudar o "aberto" e estado "fechar" gráfico

Por Programação Pular para comentários
Efeito Toggle com CSS e JQuery

Eu sei que há um monte de tutoriais sobre o efeito alternar lá fora já, mas quando eu estava aprendendo o básico do jQuery eo efeito de alternância, eu tinha muita dificuldade em encontrar recursos sobre como mudar o "aberto" e estado "fechar" gráfico.

Depois de ler alguns tutoriais e misture e técnicas de correspondência eu era capaz de conseguir este efeito, mas queria compartilhá-lo com aqueles que experimentaram a mesma frustração que eu tinha atravessado.

Efeito Toggle com CSS e JQuery

Passo 1. Wireframe & Style

Começamos com uma tag h2 com um link como o "gatilho" para o nosso efeito. Abaixo do nosso h2, teremos nosso recipiente onde temos o conteúdo. Note-se que ninho que o recipiente dentro de outro div. Uma das principais razões que decidi fazer isso foi para evitar o preenchimento de flexibilização para cima e para baixo durante sua ação.

HTML

Toggle Header



   

       

Content Header


       
   

CSS

h2.trigger {
    padding: 0 0 0 50px;
    margin: 0 0 5px 0;
    background: url(h2_trigger_a.gif) no-repeat;
    height: 46px;
    line-height: 46px;
    width: 450px;
    font-size: 2em;
    font-weight: normal;
    float: left; margin-right:15px;
}
h2.trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
    margin: 0 0 5px;
    padding: 0;
    border-top: 1px solid #d6d6d6;
    background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
    overflow: hidden;
    font-size: 1.2em;
    width: 500px;
    clear: both;
}
.toggle_container .block {
    padding: 20px; /*--Padding of Container--*/
    background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}

Passo 2. Ativando o Alternância com jQuery

jQuery

 Vamos agora ativar este efeito alternar com alguns simples jQuery.

$(document).ready(function(){
    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide(); 
    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $("h2.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });
});

 

Conclusão

Eu não sou nenhum mestre jQuery, portanto, pode haver uma maneira ainda mais curto de escrever isto, mas esta faz o truque para mim. Se qualquer jQuery cabeças estão lá fora ainda está lendo, por favor, compartilhar algumas de suas técnicas e dicas!

 

Download dos arquivos:
Efeito Toggle com CSS e JQuery

Compartilhe com seus amigos:
Thauan Almeida
Thauan Almeida É desenvolvedor Flash, Joomla e Programação. E aqui na Oficina da Net mostrará tutoriais sobre a ferramenta da Adobe e os outros citados acima.
FACEBOOK //
Quer conversar com o(a) Thauan, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.