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.
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="jquery@2.0.3" 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="jquery@2.0.3" 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! 😉
