Skip to content

Instantly share code, notes, and snippets.

@MohcinBN

MohcinBN/showdivfull

Last active October 8, 2018 17:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MohcinBN/4781c74eea94dae7584ade1a8681c621 to your computer and use it in GitHub Desktop.
Save MohcinBN/4781c74eea94dae7584ade1a8681c621 to your computer and use it in GitHub Desktop.
Download ZIP
Jquery Click to show div 100%, with css animation
Raw
showdivfull
<!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