Close Menu
Código Simples .NETCódigo Simples .NET
    Facebook X (Twitter) Instagram
    Trending
    • Quando usar arquitetura modular — e quando não usar
    • Mais de 200 livros de programação gratuitos em português
    • System Design: da teoria à prática
    • Pessoas e Processos: o fator humano por trás da arquitetura de sistemas
    • Observabilidade e Operações: dando olhos e mãos ao sistema
    • Performance e Custo: otimizando o que realmente importa
    • Padrões de Arquitetura e Organização: quando o design encontra a realidade
    • Confiabilidade e Consistência: construindo sistemas que não quebram sob pressão
    Facebook X (Twitter) Instagram
    Código Simples .NETCódigo Simples .NET
    Código Simples .NETCódigo Simples .NET
    Home»Dicas»Usando transições CSS para SlideUp e slideDown

    Usando transições CSS para SlideUp e slideDown

    Jhonathan SoaresBy Jhonathan Soares8 de março de 20141 Min Read Dicas
    Share
    Facebook Twitter LinkedIn WhatsApp Copy Link

    Olá pessoal! Hoje vou falar sobre como realizar um simples efeito de SlideUp e SlideDown ( lembra bem o accordion do Jquery UI ), mas de maneira simples onde você mesmo poderá alterar e trabalhar seus componentes sem a dependencia do Jquery UI ou de componentes que realizam isto.

    JavaScript-logo

    Iremos utilizar apenas a nova biblioteca do Jquery que pode ser baixada aqui . Vamos utilizar inicialmente nossa estrutura com o css :

     <style>
            #Slider {
                
            }
            #Atual {
                background: silver;
                color: White;
                padding: 20px;
            }
            .slideup, .slidedown {
                max-height: 0;            
                overflow-y: hidden;
                -webkit-transition: max-height 0.8s ease-in-out;
                -moz-transition: max-height 0.8s ease-in-out;
                -o-transition: max-height 0.8s ease-in-out;
                transition: max-height 0.8s ease-in-out;
            }
            .slidedown {            
                max-height: 60px ;                    
            }    
        </style>

    Veja nosso Html :

      
      <div class="container" style="padding: 40px">
          <button id="Trigger">Acionar Slideup/SlideDown</button>
          <div id="Slider" class="slideup">
              <div id="Atual">
                    Olá Mundo - Código Simples
                </div>
          </div>
        </div>
        

    E pra finalizar vamos utilizar a nossa função JavaScript :

      
    <script data-require="[email protected]" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script>
            
            $("#Trigger").click(function () {
              //$("#Slider").toggleClass("slidedown slideup");
                if ($("#Slider").hasClass("slideup"))
                  $("#Slider").removeClass("slideup").addClass("slidedown");
                else
                    $("#Slider").removeClass("slidedown").addClass("slideup");
            });
        </script>
        
        

    Com isto vamos conseguir basicamente este efeito transformando este código em um arquivo html:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
      <head>
        
        <style>
            #Slider {
                
            }
            #Atual {
                background: silver;
                color: White;
                padding: 20px;
            }
            .slideup, .slidedown {
                max-height: 0;            
                overflow-y: hidden;
                -webkit-transition: max-height 0.8s ease-in-out;
                -moz-transition: max-height 0.8s ease-in-out;
                -o-transition: max-height 0.8s ease-in-out;
                transition: max-height 0.8s ease-in-out;
            }
            .slidedown {            
                max-height: 60px ;                    
            }    
        </style>
      </head>
    
      <body>
        <div class="container" style="padding: 40px">
          <button id="Trigger">Acionar Slideup/SlideDown</button>
          <div id="Slider" class="slideup">
          
            <div id="Atual">
                    Olá mundo - Código Simples
                </div>
          </div>
        </div>
    
    
        <script data-require="[email protected]" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script>
            
            $("#Trigger").click(function () {
              //$("#Slider").toggleClass("slidedown slideup");
                if ($("#Slider").hasClass("slideup"))
                  $("#Slider").removeClass("slideup").addClass("slidedown");
                else
                    $("#Slider").removeClass("slidedown").addClass("slideup");
            });
        </script>
      </body>
    </html>
    
    Pronto! Assim você poderá criar outros efeitos de acordo com sua necessidade!

    Obs: Deixei comentado via javascript uma função que também realiza o mesmo processo de slide porém de maneira simplificada e direta.

    Por hoje é só. Mais um tutorial utilizando Código Simples! 😉

    css dicas front-end html5 javascript
    Share. Facebook Twitter LinkedIn Telegram WhatsApp Copy Link
    Jhonathan Soares
    • Website
    • Facebook
    • X (Twitter)
    • LinkedIn

    Criador do blog Código Simples e com mais 15 anos de experiência em TI, com títulos de MVP Microsoft na área de Visual Studio Development, Neo4j Top 50 Certificate, Scrum Master e MongoDB Evangelist.

    Posts Relacionados

    Mais de 200 livros de programação gratuitos em português

    Cursos Dicas 16 de setembro de 202511 Mins Read

    Happy Hour com Dados #17 – Azure vs AWS vs GCP

    Front-End 26 de maio de 20211 Min Read

    Happy Hour com Dados #16 – Java vs C#

    C# Dicas 22 de setembro de 20201 Min Read
    Newsletter

    Digite seu endereço de e-mail para receber notificações de novas publicações por e-mail.

    Junte-se a 25mil outros assinantes
    Posts recentes
    • Quando usar arquitetura modular — e quando não usar
    • Mais de 200 livros de programação gratuitos em português
    • System Design: da teoria à prática
    • Pessoas e Processos: o fator humano por trás da arquitetura de sistemas
    • Observabilidade e Operações: dando olhos e mãos ao sistema
    Categorias
    • Arquitetura (28)
      • Microsserviços (3)
      • Testes (2)
    • Asp.net (120)
      • C# (89)
      • Mvc (13)
    • Banco de dados (92)
      • NoSql (59)
      • Sql (38)
    • Boas práticas (33)
      • Gestão & Produtividade (3)
      • Metodologias Ágeis (6)
    • Cursos (53)
    • Dicas (106)
    • Front-End (92)
    • IA (4)
    • Linux (6)
    • NodeJS (4)
    • Post do Leitor (9)
    • Python (5)
    • Seo (12)
    • Tecnologia (30)
      • ITIL (1)
      • Padrões de Projeto (4)
    • Testes (2)

    VEJA TAMBÉM

    Testes
    28 de fevereiro de 20254 Mins Read

    30 APIs Gratuitas para desenvolvedores

    APIs são ferramentas essenciais para desenvolvedores que querem criar aplicações mais eficientes, conectadas e funcionais sem reinventar a roda. Desde dados abertos, notícias em tempo real e inteligência artificial até esportes e clima, há APIs gratuitas que oferecem vastas possibilidades de integração. Este artigo apresenta 30 APIs gratuitas que podem acelerar o desenvolvimento e abrir novas oportunidades para projetos inovadores.

    1000 livros gratuitos sobre programação!

    Facebook X (Twitter) Instagram LinkedIn

    Type above and press Enter to search. Press Esc to cancel.

    Vá para versão mobile