div使用按钮向下滑动，向下滚动后消失

Question

I would like to know how to reveal div after clicking on a angle-down button which would disappear in the same way as in Quora: when you click on an answer from the home page, you can make it disappear either by clicking the exit button at the bottom of the answer or by scrolling down long enough).

An image to illustrate:

So basically I will have a list of products with a summary, if you click on the angle down button of a product a div slides down to reveal more information (shifting down the next product, no overlap), this div can disappear with an exit button and by scrolling down Quora-style.

If you have any questions let me know.

Cheers! Pierre

Answer 1

I made a simple example here let me know if you have any questions about it.

 var classname = document.getElementsByClassName("open"); function toggleValue(current, first, second) { return current === first ? second : first } function toggleFunc() { this.style.letterSpacing = toggleValue(this.style.letterSpacing, '-10px', '-1px') this.parentNode.style.maxHeight = toggleValue(this.parentNode.style.maxHeight, '1000px', '200px') } Array.from(classname).forEach(function(element) { element.addEventListener('click', toggleFunc); }); 

 p { font-size: 1.2rem } article { position: relative; overflow: hidden; transition: max-height 1s; max-height: 200px; padding: 2rem; text-align: justify; } article header { text-align: center; font-size: 4rem } .open { font-size: 2rem; position: absolute; bottom: 0; left: calc(50% - 2rem); font-weight: bold; padding: 0.7rem 1.5rem; } 

 <article> <header>Title</header> <p>Lorem ipsum dolor sit amet, clita noluisse cum id, utamur propriae persequeris eu ius, cum cu praesent tincidunt. In vim volumus scriptorem. Timeam oportere nam eu, ad eum mucius bonorum. Cu sed indoctum repudiandae. Homero reprehendunt duo ad, no est modus harum. Nibh offendit ut duo, iudico corrumpit eos cu. Et pri sint officiis elaboraret, mazim petentium sed no. Dicit nusquam insolens eu eos. Mel in mucius imperdiet, essent eligendi scribentur mei no. Amet gloriatur his cu, eam te simul cetero gloriatur, an modus mediocrem his. Ad vel veri voluptaria instructior, at dicunt vidisse petentium duo. Cu sit purto reque ipsum, eos an omnis integre definitiones, an sit alienum offendit. Eu meis viderer has, hinc nostro aeterno est ex. Ridens denique nam ut, vim solum fabulas ad, mel nisl dicunt qualisque no. Ut nec nemore tractatos persecuti, ea libris diceret ius. Ex probo diceret sea, detracto quaestio ullamcorper pro ex, labitur tractatos scripserit his te. Quas sanctus meliore te vel, ne eos amet deleniti. Vix quando recteque ne. Id petentium expetendis cum, eos porro ridens ad. Vis solum definitiones ad, vix recteque scripserit temporibus id. Mel molestie maluisset cu, cu his falli aeque mundi. Vix nemore adipisci in. At qui nihil deterruisset, eos nibh viderer no. Scripta euismod euripidis an vel, pri ea mutat virtute expetendis, wisi accusam est at.</p> <button class="open">\\/</button> </article> <article> <header>Title</header> <p>Lorem ipsum dolor sit amet, clita noluisse cum id, utamur propriae persequeris eu ius, cum cu praesent tincidunt. In vim volumus scriptorem. Timeam oportere nam eu, ad eum mucius bonorum. Cu sed indoctum repudiandae. Homero reprehendunt duo ad, no est modus harum. Nibh offendit ut duo, iudico corrumpit eos cu. Et pri sint officiis elaboraret, mazim petentium sed no. Dicit nusquam insolens eu eos. Mel in mucius imperdiet, essent eligendi scribentur mei no. Amet gloriatur his cu, eam te simul cetero gloriatur, an modus mediocrem his. Ad vel veri voluptaria instructior, at dicunt vidisse petentium duo. Cu sit purto reque ipsum, eos an omnis integre definitiones, an sit alienum offendit. Eu meis viderer has, hinc nostro aeterno est ex. Ridens denique nam ut, vim solum fabulas ad, mel nisl dicunt qualisque no. Ut nec nemore tractatos persecuti, ea libris diceret ius. Ex probo diceret sea, detracto quaestio ullamcorper pro ex, labitur tractatos scripserit his te. Quas sanctus meliore te vel, ne eos amet deleniti. Vix quando recteque ne. Id petentium expetendis cum, eos porro ridens ad. Vis solum definitiones ad, vix recteque scripserit temporibus id. Mel molestie maluisset cu, cu his falli aeque mundi. Vix nemore adipisci in. At qui nihil deterruisset, eos nibh viderer no. Scripta euismod euripidis an vel, pri ea mutat virtute expetendis, wisi accusam est at.</p> <button class="open">\\/</button> </article>