Hazard Hazard - 3 months ago 23
CSS Question

How to show more/show less with overflow scroll?

I've a

div
with content which overflows. So I restricted the content with certain height using show less/ show more.

But my problem is,when I click show-more and scroll the content,and hit show less,the content appearing is getting freeze instead of moving to the top.Is there any way to move to top onclick of show less in the middle of scroll.



$("div.show-more a").on("click", function() {
var $this = $(this);
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();
if (linkText === "SHOW MORE") {
linkText = "Show less";
$content.removeClass("hideContent").addClass("showContent");
} else {
linkText = "Show more";
$content.removeClass("showContent").addClass("hideContent");
};

$this.text(linkText);
});

body {
padding: 5%;
}

.hideContent {
overflow: hidden;
height: 30px;
}

.showContent {
max-height: 40px;
overflow-y: auto;
}

.show-more {
padding: 10px 0;
text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
<div class="content hideContent">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<p>Some more text</p>
<ul>
<li>Some more text</li>
<li>Some more text</li>
<li>Some more text</li>
</ul>
</div>
<div class="show-more">
<a href="#">Show more</a>
</div>
</div>
<div class="text-container">
<div class="content hideContent">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<p>Some more text</p>
<ul>
<li>Some more text</li>
<li>Some more text</li>
<li>Some more text</li>
</ul>
</div>
<div class="show-more">
<a href="#">Show more</a>
</div>
</div>
<div class="text-container">
<div class="content hideContent">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<p>Some more text</p>
<ul>
<li>Some more text</li>
<li>Some more text</li>
<li>Some more text</li>
</ul>
</div>
<div class="show-more">
<a href="#">Show more</a>
</div>
</div>





Fiddle here

Answer

You can use the jquery function scrollTop(0) to scroll back to the top before hiding the content:

$content.scrollTop(0).removeClass("showContent").addClass("hideContent");