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 | @oficinadanet Programação
<p>Eu sei que h&aacute; um monte de tutoriais sobre o efeito alternar l&aacute; fora j&aacute;, mas quando eu estava aprendendo o b&aacute;sico do jQuery eo efeito de altern&acirc;ncia, eu tinha muita dificuldade em encontrar recursos sobre como mudar o "aberto" e estado "fechar" gr&aacute;fico.</p> <p>Depois de ler alguns tutoriais e misture e t&eacute;cnicas de correspond&ecirc;ncia eu era capaz de conseguir este efeito, mas queria compartilh&aacute;-lo com aqueles que experimentaram a mesma frustra&ccedil;&atilde;o que eu tinha atravessado.</p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/2873/toggle.jpg" alt="" /></span></p> <h2>Passo 1. Wireframe &amp; Style</h2> <p>Come&ccedil;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&uacute;do. Note-se que ninho que o recipiente dentro de outro div. Uma das principais raz&otilde;es que decidi fazer isso foi para evitar o preenchimento de flexibiliza&ccedil;&atilde;o para cima e para baixo durante sua a&ccedil;&atilde;o.</p> <h2>HTML</h2> <p><code><h2 class="trigger"><a href="#">Toggle Header</a></h2><br /> <div class="toggle_container"><br />    <div class="block"><br />        <h2>Content Header</h3><br />        <!--Content--><br />    </div><br /> </div></code></p> <h2>CSS</h2> <p><code>h2.trigger { <br />    padding: 0 0 0 50px; <br />    margin: 0 0 5px 0; <br />    background: url(h2_trigger_a.gif) no-repeat; <br />    height: 46px; <br />    line-height: 46px; <br />    width: 450px; <br />    font-size: 2em; <br />    font-weight: normal; <br />    float: left; margin-right:15px; <br />} <br />h2.trigger a { <br />    color: #fff; <br />    text-decoration: none; <br />    display: block; <br />} <br />h2.trigger a:hover { color: #ccc; } <br />h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/ <br />.toggle_container { <br />    margin: 0 0 5px; <br />    padding: 0; <br />    border-top: 1px solid #d6d6d6; <br />    background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top; <br />    overflow: hidden; <br />    font-size: 1.2em; <br />    width: 500px; <br />    clear: both; <br />} <br />.toggle_container .block { <br />    padding: 20px; /*--Padding of Container--*/ <br />    background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/ <br />}</code></p> <h2>Passo 2. Ativando o Altern&acirc;ncia com jQuery</h2> <p><strong>jQuery</strong></p> <p><strong>&nbsp;</strong>Vamos agora ativar este efeito alternar com alguns simples jQuery.</p> <p><code>$(document).ready(function(){ <br />    //Hide (Collapse) the toggle containers on load <br />    $(".toggle_container").hide();  <br />    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) <br />    $("h2.trigger").click(function(){ <br />        $(this).toggleClass("active").next().slideToggle("slow"); <br />        return false; //Prevent the browser jump to the link anchor <br />    }); <br />});</code></p> <p>&nbsp;</p> <h3>Conclus&atilde;o</h3> <p>Eu n&atilde;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&ccedil;as est&atilde;o l&aacute; fora ainda est&aacute; lendo, por favor, compartilhar algumas de suas t&eacute;cnicas e dicas!</p> <p>&nbsp;</p> <p style="text-align: center;"><strong>Download dos arquivos:</strong><br /><img src="https://www.oficinadanet.com.br/imagens/post/2873/botaodownloadoficina.jpg" alt="" /></p>
Recomendado
Siga nas redes
Últimas publicações
O QUE LER EM SEGUIDA
Assuntos jquery, css e efeito
Siga nas redes
Encontrou algum erro no texto?

Entre em contato com o autor e nos ajude a melhorar a qualidade dos posts cada vez mais!

AVISAR
Comentários
ASSINE NOSSA NEWSLETTER

As melhores publicações no
seu e-mail