CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RunningWalks
RunningWalks

Reputation: 119

Expanding Text section with fade out

trying to set my text sections on a website (HTML, CSS & minimal javascript) to only show the first few lines of a paragraph then fade out with an option to view more. When the more button/text is clicked the section expands downwards showing the text in its entirety.

Here is an image which will hopefully explain what I am trying to do.

enter image description here

Thanks for any help!

Upvotes: 1

Views: 269

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39322

$(function() {
    $('.open-close').each(function() {
        var item = $(this);
        var slide = item.find('.slide').css({
            'height': 100
        });
        var opener = item.find('.more');
        var isSlideOpen = false;
        var slideHeight = slide.find('.slide-content').innerHeight();
      
        opener.click(function(e) {
            e.preventDefault();
          
            if(isSlideOpen) {
                
                slide.stop(true).animate({
                    height: 100
                }, function() {
                    isSlideOpen = false;
                });
            } else {
                slide.stop(true).animate({
                    height: slideHeight
                }, function() {
                    isSlideOpen = true;
                });
            }
        });
    });
});
html {
  background: #000;
}
body {
  line-height: 20px;
  font-size: 14px;
  margin: 0;
  color: #fff;
}

.open-close {
  padding: 10px;
}

.link-holder {
  position: relative;
  text-align: right;
  padding: 10px 0 0;
  z-index: 10;
}

.link-holder:before {
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  height: 80px;
  content: '';
  z-index: -1;
  bottom: 20px;
  right: 0;
  left: 0;
}

.slide {
  position: relative;
  overflow: hidden;
  z-index: 5;
}

.more {
  text-decoration: none;
  color: #cff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="open-close">
    <div class="slide">
      <div class="slide-content">
        <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
       </div>
    </div>
    <div class="link-holder">
        <a href="#" class="more">More</a>
    </div>
</div>

Upvotes: 2

Related Questions