テキストを拡大するセクションをフェードアウトして

Question

ウェブサイト（HTML、CSS &最小javascript）でテキストセクションを設定しようとすると、段落の最初の数行だけが表示され、さらに表示するオプションでフェードアウトされます。より多くのボタン/テキストがクリックされると、セクションは下方に拡大され、テキスト全体を示す。

ここに私がしようとしていることをうまく説明する画像があります。任意の助け

ありがとう！

Answer 1

$(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>