Here is my test code:
<div id="scrollable" style="width:100%; height:100px; overflow: scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorum esse,
illum nostrum placeat quia? Animi corporis explicabo modi neque porro possimus
quos totam. Accusamus ad aliquam animi, aperiam atque beatae consectetur
debitis deleniti dignissimos doloremque doloribus ducimus ea error est eveniet
fugit id iste itaque mollitia nostrum officia omnis optio quam quidem saepe
sapiente ullam voluptatibus. A ad aliquam at aut, blanditiis commodi
consectetur consequuntur delectus dignissimos ducimus ea esse est fuga fugiat,
fugit illo inventore ipsa iusto laboriosam libero minima minus nesciunt nulla
officia quaerat quam quidem quo recusandae reprehenderit similique soluta
tempora, temporibus ut vel veritatis vero voluptatem. Ab culpa dolore eveniet
exercitationem explicabo incidunt itaque laudantium molestiae nisi nobis
nostrum, numquam possimus quam, quas quis, quisquam recusandae sed voluptatem.
Deleniti esse iure nisi odio ullam. Autem ducimus eius enim inventore placeat
possimus repudiandae voluptates? A adipisci cumque doloribus eligendi, eos
eveniet harum laborum minus nam optio quae sed voluptas voluptates.
Accusantium architecto, at dolor dolore eligendi incidunt ipsa, ipsum iure
mollitia, nam nesciunt quo repellendus reprehenderit rerum sapiente similique
voluptas. Eos laborum optio quibusdam voluptatum. Deserunt dolor doloribus
enim minus praesentium reiciendis soluta tenetur. Ad consectetur consequuntur
cumque iure molestias nam perferendis placeat quibusdam soluta, voluptatum!
</div>
<script
type="text/javascript"
src="../node_modules/jquery/dist/jquery.js"
></script>
<script>
var scrollable = document.querySelector("#scrollable");
$(scrollable).on("scroll", ev => {
console.log(`container scroll top:${$(scrollable).scrollTop()}`);
console.log(`container scroll height:${$(scrollable).height()}`);
});
</script>
I'm confused, when i scroll to scrollable div bottom, the scroll top != scroll height
This should be correct.
container scroll height is the height of the window.
container scroll top is how far from the top of the content you've scrolled.
So if I load your content in my browser, and the container scroll height = 100, and I make the window narrower, then my container scroll height is still 100, I haven't changed the height of the window. But now you can scroll further down, so your container scroll top could change as you scroll further down.
Related
I'm using AOS.js (Animate On Scroll Library), but the scrollbars appear while elements are animating since they are out of the window.
Obviously, if I add 'overflow: hidden' to the body or the parent element, users wouldn't be able to scroll through the content when the window resizes.
Does anyone have an idea how to solve this? How to hide overflow only while the element is animating?
I found this in the AOS.js documentation, but I'm not sure what it is, where to put it and whether this is for my problem or something else.
JS Events - AOS dispatches two events on document: aos:in and aos:out whenever any element animates in or out, so that you can do extra stuff in JS:
document.addEventListener('aos:in', ({ detail }) => {
console.log('animated in', detail);
});
document.addEventListener('aos:out', ({ detail }) => {
console.log('animated out', detail);
});
If I am getting this right you want to hide your both vertical and horizontal scrollbars from a div or any element that have overflow: scroll?
If yes then you can simply add this in your css to hide them:
.[your element class name]::-webkit-scrollbar {
width: 0px;
height: 0px;
}
Preview Below:
.items {
height: 80vh;
width: 80vw;
border: 5px solid black;
background: #aae5fd;
overflow: scroll;
padding: 20px;
}
.items::-webkit-scrollbar {
width: 0px;
height: 0px;
}
<div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem eum quae quis animi vel nesciunt voluptate sint esse illo, laudantium reiciendis quibusdam explicabo dolores? Dolorem illo quod, odio architecto recusandae iste sit repudiandae magni minus
assumenda enim fugiat doloremque doloribus possimus, perferendis expedita alias! Dolores possimus qui dolorum tempora iure dignissimos nisi sed ducimus aspernatur, maiores vel neque cupiditate porro, sit, obcaecati pariatur dolorem. Sint numquam nobis
doloremque similique voluptates qui quo recusandae impedit nemo tempore, neque asperiores iste est saepe nihil molestias nesciunt cupiditate sed alias, ea hic eligendi quae. Et, asperiores dolores? Cupiditate harum enim, fugit dolores voluptatem ea
optio eveniet vel laudantium sequi officiis error, aliquam laboriosam ipsum quos officia aut reprehenderit. Explicabo nam velit enim, consectetur eligendi perspiciatis cumque, ipsum fugit deserunt nisi, deleniti iure impedit quasi animi? Vero excepturi
saepe, accusantium, ex enim, mollitia aliquid iste a quo impedit voluptate repudiandae! Laborum magni necessitatibus atque enim alias debitis architecto esse! Exercitationem veritatis sapiente minima dolor. Laboriosam provident cumque tempora officia
harum eum, possimus fugit doloribus hic, pariatur, eos sunt consequatur. Itaque repudiandae, dolore quod dolorem, minus laborum odio illum facilis optio rem fugit delectus soluta? Asperiores iusto hic vitae magnam esse veniam nihil laboriosam est!Lorem
ipsum dolor sit amet consectetur adipisicing elit. Quidem eum quae quis animi vel nesciunt voluptate sint esse illo, laudantium reiciendis quibusdam explicabo dolores? Dolorem illo quod, odio architecto recusandae iste sit repudiandae magni minus assumenda
enim fugiat doloremque doloribus possimus, perferendis expedita alias! Dolores possimus qui dolorum tempora iure dignissimos nisi sed ducimus aspernatur, maiores vel neque cupiditate porro, sit, obcaecati pariatur dolorem. Sint numquam nobis doloremque
similique voluptates qui quo recusandae impedit nemo tempore, neque asperiores iste est saepe nihil molestias nesciunt cupiditate sed alias, ea hic eligendi quae. Et, asperiores dolores? Cupiditate harum enim, fugit dolores voluptatem ea optio eveniet
vel laudantium sequi officiis error, aliquam laboriosam ipsum quos officia aut reprehenderit. Explicabo nam velit enim, consectetur eligendi perspiciatis cumque, ipsum fugit deserunt nisi, deleniti iure impedit quasi animi? Vero excepturi saepe, accusantium,
ex enim, mollitia aliquid iste a quo impedit voluptate repudiandae! Laborum magni necessitatibus atque enim alias debitis architecto esse! Exercitationem veritatis sapiente minima dolor. Laboriosam provident cumque tempora officia harum eum, possimus
fugit doloribus hic, pariatur, eos sunt consequatur. Itaque repudiandae, dolore quod dolorem, minus laborum odio illum facilis optio rem fugit delectus soluta? Asperiores iusto hic vitae magnam esse veniam nihil laboriosam est</div>
I have a simple paragraph in html with overflow: scroll; in the css. I then do a simple document.getElementById(id).innerHTML = new HTML and change the initially little text to a much longer paragraph. The scroll feature then doesn't 'update' (not sure if this is correct terminology). I tried just adding the class again in jQuery but that bodge failed, what is the 'correct' way to do this.
You need to define max-height of p tag & overflow-y:auto for vertically scrolling.
function addText(id){
document.getElementById(id).innerHTML = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias praesentium veniam, fugit, id asperiores pariatur neque, ullam iste dignissimos natus molestias ab. Fugiat voluptates in soluta porro inventore minima similique deserunt quidem aliquid rem fugit corporis, qui error laboriosam atque, esse neque libero quam quisquam doloremque. Commodi aliquid, id asperiores ullam est error consequuntur labore vel cupiditate, assumenda, neque beatae tempora amet. Amet, animi provident explicabo ea deserunt dolore itaque assumenda ipsa vitae numquam suscipit saepe eius deleniti repellat exercitationem libero maiores aliquid ducimus odio nesciunt placeat esse quaerat iure! Amet consequatur quasi ab. Consequuntur inventore eum dolor quos deleniti nisi nostrum, dignissimos laborum reprehenderit mollitia in. Inventore labore saepe distinctio consequuntur non assumenda necessitatibus recusandae fugiat exercitationem, ipsa nesciunt ducimus reprehenderit sapiente earum voluptatum autem sequi blanditiis similique alias quasi voluptatem. Doloribus reprehenderit, quos vitae omnis sunt doloremque? Eligendi vitae distinctio ea ex alias commodi, pariatur, unde laborum sint molestias ipsa. Doloremque doloribus necessitatibus blanditiis laudantium, iusto eius perspiciatis odio voluptate maxime sit, maiores aspernatur delectus adipisci illum explicabo praesentium, veniam porro exercitationem magni ullam libero distinctio. Deleniti porro eius, quaerat consequatur a illo repellendus consectetur nesciunt aliquid adipisci dignissimos ratione? Dolorem iure magnam repellendus! Illum sit quam impedit unde id provident sunt, blanditiis iusto rerum omnis architecto, voluptatum perspiciatis distinctio praesentium quia. Eaque a minus assumenda aliquam enim qui totam consequuntur veniam sed vero. Maiores eveniet minus exercitationem tempore dolor minima magnam iure! Nisi, voluptas. Dicta iste quia ducimus minus suscipit molestiae quaerat delectus temporibus quas, maiores harum eum tempore dolorum cumque in laborum est aliquam, beatae mollitia ea vitae! Quam ipsa nostrum eligendi, obcaecati voluptate recusandae placeat iste libero distinctio quisquam? Molestias distinctio eligendi alias voluptate sunt cum, voluptatum adipisci aliquid. Consequatur enim minima incidunt illum corrupti porro ipsam dolorem similique quia nihil! Enim, sapiente? Enim, illo!';
}
p{
border: 1px solid #ccc;
width: 200px;
max-height: 140px;
padding: 15px;
overflow: hidden;
overflow-y: auto;
}
<p id="paragraph">This is sort text...</p>
<button type="button" onclick="addText('paragraph')">Add More Text</button>
I have a button that you click on and a div appears.
If you'll scroll down from an iPhone you'll see that it's not scrolling smoothly as it should. for some reason it's losing that behavior and I don't know why.
HTML
<button id="page1">Hey</button>
<div class="page1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sunt nemo, unde, nisi quisquam minus blanditiis rerum harum obcaecati, dolore perspiciatis? Ad nemo aperiam cumque a delectus facilis tempora architecto?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui laboriosam minus praesentium excepturi cumque culpa quibusdam, maiores odit cupiditate natus, possimus, libero repellendus sed doloribus animi eos cum dolorum at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis et hic tenetur velit iste dignissimos est suscipit ducimus facilis, quibusdam dicta iure quidem beatae quisquam sit quasi harum, provident nostrum at illum. Quisquam accusamus autem id dolorem harum aspernatur est impedit amet, asperiores praesentium, vitae molestiae repellendus natus velit libero ipsam, qui assumenda pariatur nulla dicta ea voluptatum. Dolorem eos officia, et nostrum numquam quasi hic corrupti fugit commodi beatae aliquid minima, vel dolores maiores ex! Quas soluta nemo quod, natus quo tenetur odio, repellendus iure amet fuga! Odit temporibus debitis voluptate blanditiis, veniam delectus minima dolores, commodi quas laborum nobis dolorem placeat ea, officia magnam totam fuga corporis cumque. Quos asperiores veritatis quo! Quo dolorum officiis temporibus repudiandae aliquam esse, ex expedita sed sequi corporis voluptatum ullam accusamus laboriosam quae, ducimus ea qui quia! Quis nostrum, distinctio maxime. Similique in assumenda ipsum officia incidunt rem ratione velit harum dolore labore id aperiam quaerat magnam iste ipsam, minima, rerum consequuntur earum modi molestiae dolorum optio temporibus! Adipisci optio ex, fugiat nostrum sint, sunt at. Reprehenderit autem mollitia earum, ipsa porro, tempora tenetur impedit omnis unde iure, alias vitae illo quod ab assumenda magnam molestias atque provident voluptatem laboriosam quae! Optio quisquam corporis beatae iure, natus, cumque porro, ullam dolorem illum odit quia itaque ut molestias voluptas. Architecto animi ratione, ad accusamus commodi fugit nemo laborum similique illum suscipit deleniti, sed deserunt? Quis nam quasi qui ab vel dignissimos vitae in, aspernatur soluta aliquam explicabo magni alias tempore, molestias facilis ducimus aut inventore neque animi hic. Soluta officiis exercitationem iure magnam earum facere provident, alias delectus explicabo quibusdam tempora amet aperiam, unde, vitae! Dolorem neque, commodi harum libero officiis explicabo perspiciatis ullam. Quisquam, nostrum illo cum hic eaque! Iste ut omnis ab accusantium eaque quaerat dolorum, nulla eius rerum est ipsa. Nostrum asperiores esse porro nam, sint minus ullam. Enim porro eveniet harum, ducimus veritatis eius natus non quo eaque ut repudiandae hic sunt dolores quibusdam maxime fugiat fugit distinctio! Inventore alias commodi perferendis minus sint ipsum officia quaerat aperiam sapiente in ratione, accusantium nobis eum et temporibus cum accusamus consectetur doloribus illum? Odio quisquam placeat deleniti. Ducimus accusantium at esse autem architecto incidunt omnis earum, ipsam dignissimos, dolorem ex quibusdam! Repellendus expedita unde, ullam, placeat, aut officia doloremque mollitia impedit quidem sequi maxime. Cumque sit eaque repellendus perferendis, accusamus deserunt iusto error quod magni, quo vero unde molestiae corporis suscipit?</p>
</div>
CSS
.page1 {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
overflow:auto;
background:#039;
color:#fff;
padding:40px;
}
.noscrolling {
overflow:hidden;
}
button {
margin:30px;
}
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
var button_id = $(this).attr('id');
$('.'+button_id).fadeIn();
$('body').addClass('noscrolling');
});
});
</script>
Try adding this css.
.page1 {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
I have this js script that will make the page fade in when the user enters, and fades out when the user clicks a link to another page. It works, but somehow I have my anchor links within the page and whenever I click the links, it takes me to the anchor and within a few seconds it redirects me to a null page like localhost/website/null
here's the code:
jQuery('body').css('display', 'none');
jQuery(document).ready(function() {
jQuery('body').fadeIn();
jQuery('a').on('click', function(event) {
var thetarget = this.getAttribute('target')
if (thetarget !="_blank" ) {
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery('body').fadeOut(function(){
window.location = thehref
});
}
});
});
setTimeout(function() {
jQuery('body').fadeIn();
}, 1000)
I'm not understanding the problem -- maybe there isn't an issue? Refer to the snippet below?
Meta/Sidenote: SO needs a better way of creating snippets for comments -- this shouldn't be an answer, but there's no better way to supply a SO-generated demo.
jQuery('.container').css('display', 'none');
jQuery(document).ready(function($) {
var $container = $('container').fadeIn();
$('a').on('click', function(e) {
var _target = this.getAttribute('target');
if (_target != "_blank") { // (e.g., null, '_self')
var _href = this.getAttribute('href');
e.preventDefault();
$('.container').fadeOut(function() {
window.location = _href;
});
}
});
});
setTimeout(function() {
jQuery('.container').fadeIn();
}, 1000)
.container {
background: #09c;
padding: 1em;
height: 100%;
width: 100vw;
}
a:nth-child(2n)::after {
content: "\A";
white-space: pre;
}
body {
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
_self (external link)
_self (internal link)
_blank (external link)
_blank (internal link)
No target (external link)
No target (internal link)
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, reprehenderit, nostrum. Tempora totam, iusto, inventore cupiditate hic quam quas explicabo dolore mollitia eius ullam rerum minus placeat nobis in debitis magni non, dolor aut libero
dignissimos fugiat. Sed laboriosam itaque necessitatibus hic excepturi, perferendis, exercitationem cumque incidunt asperiores labore dolor.</p>
<p>Minus velit rerum, reiciendis perspiciatis pariatur accusamus, magni voluptatibus, voluptatem fugit optio libero quidem! Nostrum pariatur eveniet ipsum obcaecati aperiam deleniti hic quam facilis reprehenderit dolor ipsam suscipit, quidem laboriosam
impedit fugiat sit dignissimos delectus qui. Suscipit necessitatibus natus omnis eveniet molestiae nostrum aut culpa, tempora, voluptatibus modi eius nisi.</p>
<p>Illo quo, iure doloremque unde ullam iste. Fuga ullam dicta voluptate, odio sint molestiae expedita sequi, placeat omnis porro. Blanditiis ut, laboriosam nobis necessitatibus esse ipsam, magnam facilis in placeat delectus quidem eos laborum, illum
similique fugiat nesciunt doloremque ratione unde vel fugit excepturi dolor minima, amet tenetur. Tempora, eveniet.</p>
<p>Aliquam ex assumenda eum perspiciatis odio suscipit nemo in delectus. Iste in, ipsam iure deserunt, explicabo ipsum maxime. Praesentium, vitae, quos quia sed doloribus laboriosam. Architecto sapiente totam quisquam esse saepe asperiores provident
voluptatibus aperiam, similique sunt fugit cupiditate beatae aspernatur laborum, eius quas ab tempore consequatur officiis vero! Fugiat.</p>
<p>Explicabo minima necessitatibus soluta odio, sunt saepe aspernatur quasi molestiae cum? Nulla eveniet ad accusantium sed sapiente quod ea soluta repellendus culpa, ut deleniti dolore. Porro amet, quasi dignissimos provident modi nihil rerum quis explicabo,
voluptatem illo assumenda itaque. Maxime sequi asperiores enim tempora maiores dolor. Nihil quidem repudiandae asperiores!</p>
<p>Dicta facere at dolorum ut veritatis recusandae praesentium nesciunt illo, omnis doloremque labore repellendus soluta officia distinctio aperiam pariatur minus quia placeat enim, amet, quae repellat reiciendis nihil magni. Ad expedita dolores cupiditate
debitis dolore? Unde vitae inventore provident reiciendis adipisci dolorum ad ipsa possimus excepturi, mollitia nobis. Perspiciatis, voluptate.</p>
<p>Officia minima nulla delectus neque sapiente in voluptates iste facere dolorum sequi, animi fuga illo enim alias explicabo, culpa? Quaerat nesciunt animi, eius assumenda quidem sunt saepe nam suscipit voluptate eaque, laborum minus expedita nostrum
praesentium iusto eveniet officia ab tempore eos at. Dolores minus qui fugit, temporibus sequi tempora!</p>
<a id="foo" name="foo">ID:foo</a>
</div>
</body>
I hear that you can't set the height to auto, initial, or inherit for the end of an animation. so how would you set the height to the content's height? In my example the ending height is 500 but I want the height to be whatever the content is.
$(function(){
console.log($(".area").height())
$(".area").on("click", function(){
$(this).toggleClass("open")
})
})
.area{
background: limegreen;
width: 50%;
margin: 0 auto;
max-height: 200px;
overflow: hidden;
transition: max-height .5s;
}
.area.open{
max-height: 500px;
/* max-height: initial;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sequi voluptatum sed vel aut, neque dolor deserunt placeat impedit possimus illum. Et consequuntur a atque placeat incidunt cupiditate sint laborum impedit quia ex aut pariatur dicta dolor, hic exercitationem in explicabo voluptatem consequatur odio, deserunt, voluptatibus doloremque. Impedit quam sapiente, voluptate hic dicta neque illum? Ducimus harum ullam eum officiis fuga aliquid nostrum quasi, vitae nam voluptas tenetur sed sequi incidunt facilis, expedita, inventore. Deleniti tenetur veritatis voluptas quibusdam omnis, distinctio perspiciatis harum, eligendi tempore rerum molestiae, dolores facere cum? Vel eius earum iste nesciunt ullam labore tempora, facere adipisci, soluta in corporis doloribus amet, similique quam at obcaecati sunt sapiente error atque impedit ut. Saepe officia voluptas cupiditate iure et autem laudantium, totam illo voluptatibus unde ex, dolores animi. Eligendi quis, in saepe consectetur aperiam molestiae ducimus! Repellendus nam dolor provident debitis eaque animi rerum eveniet, distinctio laboriosam quidem esse molestias commodi explicabo temporibus cupiditate. Unde vitae perferendis ut eum odio assumenda, tenetur sequi dolorem id, eos natus laudantium dolor asperiores voluptate voluptates. Nihil quam, aperiam saepe voluptates praesentium, sed tempora quidem error pariatur numquam reprehenderit repellendus. Alias ex, illum ipsum sunt inventore vero amet, deleniti provident hic dolor magni officiis nam quisquam libero suscipit placeat ea debitis iure ullam perferendis iusto beatae. Libero dolore sequi consequatur, est rerum enim molestiae quia voluptates, aspernatur rem nobis quisquam quam, soluta voluptatibus. Sed architecto assumenda fugit porro eligendi quam iusto soluta doloremque sapiente, consequuntur beatae, quod nostrum suscipit voluptates necessitatibus at minus ut ea iste, nisi sit dolorum! Exercitationem, incidunt saepe asperiores. Labore voluptas dolor modi molestiae mollitia itaque ut inventore, possimus sunt provident! Ipsam in neque sint aperiam non veniam eveniet, debitis quae consequuntur distinctio dolores saepe illo ullam asperiores praesentium a quam inventore tempore assumenda, natus corporis mollitia at possimus harum. Expedita aspernatur consequatur obcaecati vero neque asperiores quasi natus voluptas dolor doloribus. Libero consequuntur nam magni ratione rem incidunt odit blanditiis aperiam molestias vero fuga, inventore fugit labore dolores dignissimos officia itaque ad explicabo quisquam minima minus asperiores repudiandae, hic voluptate sed. Magni vel labore, expedita enim voluptatibus asperiores alias commodi modi ea praesentium quo impedit dicta, vitae unde corrupti corporis laboriosam soluta quae. Sint officia quibusdam corporis blanditiis harum aspernatur, itaque quasi nihil numquam voluptatibus non sunt architecto tempora, dignissimos voluptatem debitis aperiam neque labore. Perspiciatis voluptates delectus fugit quae nulla tempora enim ex optio voluptatum cumque nostrum, neque repellendus. Cum commodi ullam, consequuntur pariatur hic officia, voluptas ea obcaecati ex fugiat, tenetur ad nostrum saepe error minus rerum modi adipisci iure accusantium quia quis cumque explicabo. Aliquid reprehenderit voluptatem, id laudantium error, adipisci alias possimus facere doloremque expedita sit eligendi cupiditate. Cumque optio, beatae consequatur nostrum accusamus sapiente vero deleniti nulla suscipit. Labore atque molestias quaerat sequi quas culpa quisquam sit ea suscipit sapiente impedit aliquam dolore repellat, est id ipsum doloribus facere quos omnis doloremque, delectus maxime excepturi tenetur! Nobis soluta esse dicta at doloribus repellat cumque animi nulla vitae repellendus id, quod rerum pariatur voluptatem, vero minus est et hic nisi ipsam aperiam! Quibusdam architecto aspernatur debitis commodi neque dolorum, impedit ad facere. Vero maiores alias saepe porro, dicta illo id suscipit adipisci animi earum neque quam consequatur pariatur, assumenda iure amet quidem, architecto ad! Ipsa vel nesciunt iste ipsum modi corporis, consequuntur voluptas quod esse veniam consectetur error illo, suscipit ab quos minus dolor atque aliquid sequi temporibus dolore architecto necessitatibus magni. Cumque quibusdam distinctio in vel aspernatur, qui maiores laudantium numquam quo itaque asperiores optio aperiam perspiciatis, ullam illo ab,
</div>
Instead of using css transition I have used animate of jquery. Here height is toggled between preset value 200px and auto.
$(function(){
console.log($(".area").height())
$(".area").on("click", function(){
if(!$(this).hasClass('open')) {
$(this).addClass('open');
var currHt = $(this).height();
var autoHt = $(this).css("height","auto").height();
$(this).css("height",currHt+"px").animate({height: autoHt+"px"}, 500);
} else {
$(this).removeClass('open')
$(this).animate({height: "200px"}, 500);
}
})
})
.area{
background: limegreen;
width: 50%;
margin: 0 auto;
height: 200px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sequi voluptatum sed vel aut, neque dolor deserunt placeat impedit possimus illum. Et consequuntur a atque placeat incidunt cupiditate sint laborum impedit quia ex aut pariatur dicta dolor, hic exercitationem in explicabo voluptatem consequatur odio, deserunt, voluptatibus doloremque. Impedit quam sapiente, voluptate hic dicta neque illum? Ducimus harum ullam eum officiis fuga aliquid nostrum quasi, vitae nam voluptas tenetur sed sequi incidunt facilis, expedita, inventore. Deleniti tenetur veritatis voluptas quibusdam omnis, distinctio perspiciatis harum, eligendi tempore rerum molestiae, dolores facere cum? Vel eius earum iste nesciunt ullam labore tempora, facere adipisci, soluta in corporis doloribus amet, similique quam at obcaecati sunt sapiente error atque impedit ut. Saepe officia voluptas cupiditate iure et autem laudantium, totam illo voluptatibus unde ex, dolores animi. Eligendi quis, in saepe consectetur aperiam molestiae ducimus! Repellendus nam dolor provident debitis eaque animi rerum eveniet, distinctio laboriosam quidem esse molestias commodi explicabo temporibus cupiditate. Unde vitae perferendis ut eum odio assumenda, tenetur sequi dolorem id, eos natus laudantium dolor asperiores voluptate voluptates. Nihil quam, aperiam saepe voluptates praesentium, sed tempora quidem error pariatur numquam reprehenderit repellendus. Alias ex, illum ipsum sunt inventore vero amet, deleniti provident hic dolor magni officiis nam quisquam libero suscipit placeat ea debitis iure ullam perferendis iusto beatae. Libero dolore sequi consequatur, est rerum enim molestiae quia voluptates, aspernatur rem nobis quisquam quam, soluta voluptatibus. Sed architecto assumenda fugit porro eligendi quam iusto soluta doloremque sapiente, consequuntur beatae, quod nostrum suscipit voluptates necessitatibus at minus ut ea iste, nisi sit dolorum! Exercitationem, incidunt saepe asperiores. Labore voluptas dolor modi molestiae mollitia itaque ut inventore, possimus sunt provident! Ipsam in neque sint aperiam non veniam eveniet, debitis quae consequuntur distinctio dolores saepe illo ullam asperiores praesentium a quam inventore tempore assumenda, natus corporis mollitia at possimus harum. Expedita aspernatur consequatur obcaecati vero neque asperiores quasi natus voluptas dolor doloribus. Libero consequuntur nam magni ratione rem incidunt odit blanditiis aperiam molestias vero fuga, inventore fugit labore dolores dignissimos officia itaque ad explicabo quisquam minima minus asperiores repudiandae, hic voluptate sed. Magni vel labore, expedita enim voluptatibus asperiores alias commodi modi ea praesentium quo impedit dicta, vitae unde corrupti corporis laboriosam soluta quae. Sint officia quibusdam corporis blanditiis harum aspernatur, itaque quasi nihil numquam voluptatibus non sunt architecto tempora, dignissimos voluptatem debitis aperiam neque labore. Perspiciatis voluptates delectus fugit quae nulla tempora enim ex optio voluptatum cumque nostrum, neque repellendus. Cum commodi ullam, consequuntur pariatur hic officia, voluptas ea obcaecati ex fugiat, tenetur ad nostrum saepe error minus rerum modi adipisci iure accusantium quia quis cumque explicabo. Aliquid reprehenderit voluptatem, id laudantium error, adipisci alias possimus facere doloremque expedita sit eligendi cupiditate. Cumque optio, beatae consequatur nostrum accusamus sapiente vero deleniti nulla suscipit. Labore atque molestias quaerat sequi quas culpa quisquam sit ea suscipit sapiente impedit aliquam dolore repellat, est id ipsum doloribus facere quos omnis doloremque, delectus maxime excepturi tenetur! Nobis soluta esse dicta at doloribus repellat cumque animi nulla vitae repellendus id, quod rerum pariatur voluptatem, vero minus est et hic nisi ipsam aperiam! Quibusdam architecto aspernatur debitis commodi neque dolorum, impedit ad facere. Vero maiores alias saepe porro, dicta illo id suscipit adipisci animi earum neque quam consequatur pariatur, assumenda iure amet quidem, architecto ad! Ipsa vel nesciunt iste ipsum modi corporis, consequuntur voluptas quod esse veniam consectetur error illo, suscipit ab quos minus dolor atque aliquid sequi temporibus dolore architecto necessitatibus magni. Cumque quibusdam distinctio in vel aspernatur, qui maiores laudantium numquam quo itaque asperiores optio aperiam perspiciatis, ullam illo ab,
</div>