height increase or decrease by click by calling custom class on div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.actual-height {
background-color: red;
width: 300px;
height: 20px;
overflow:hidden;
}
</style>
</head>
<body>
<button>Change size!</button>
<div class="box actual-height"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio! </div>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script>
$('button').on('click', function() {
$('.box').toggleClass('change');
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.actual-height {
background-color: red;
width: 300px;
height: 20px;
overflow:hidden;
}
</style>
</head>
<body>
<button>Change size!</button>
<div class="box actual-height"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure exercitationem rem labore officia quaerat ea enim magni asperiores quia natus totam dolore quidem quod velit voluptatibus animi adipisci eos distinctio! </div>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script>
$('button').on('click', function() {
$('.box').toggleClass('change');
});
</script>
</body>
</html>
Comments
Post a Comment