Skip to content

Instantly share code, notes, and snippets.

@MohcinBN
Last active Oct 8, 2018
Embed
What would you like to do?
Jquery Click to show div 100%, with css animation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.text {width: 40%; background: red;}
.back {display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p class="show">
<span class="go">===></span>
<span class="back">===></span>
</p>
<div class="text">
sldnfmlsqndfmsndmfnsmdfnmsndfmsndfk
zefkzlkefjzjefùlzjefjzefezzklejmef
eflknzlkefnlm,mkl,efmkl,efmklz,emfkl,
</div>
<script>
$(document).ready(function() {
$('.show').on('click',function() {
var fully = $(this);
if (fully.hasClass('clicked')){
fully.removeClass('clicked');
$('.text').css({ width: '40%', transition: 'width 1s ease-in-out' });
$('.go').show();
$('.back').hide();
} else {
fully.addClass('clicked');
$('.text').css({ width: '100%', transition: 'width 1s ease-in-out' });
$('.go').hide();
$('.back').show();
}
return false;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment