如何向下滑動元件

Question

我有背景圖像的部分的一部分，我的形象的高度900px我想告訴我的文字爲例600 character過上那部分，當用戶點擊的只是一部分看多它得到了slideDown顯示所有文字。

一個想法，我心目中是，如果文本長度大於600，把保持部分在「`然後隱藏它，並當上看到用戶點擊MORE我了slideDown跨越。 實現此目標的最佳解決方案是什麼？

section.requirement { 
 
    background: rgba(0, 0, 0, 0) url("/themes/gttc_2016/images/requerment_bg.jpg") no-repeat scroll 50% 0/cover ; 
 
    color: #fff; 
 
    min-height: 600px; 
 
    padding: 0 10% 50px; 
 
}

<section class="requirement text-center"> 
 
      <h2 class="label-titr">Prerequisites and Requirements</h2> 
 
      <div class="whybuild"> 
 
       <div> <p>General Requirements:</p> 
 

 
<ul> 
 
\t <li>You are self-driven and motivated to learn. Participation in this program requires consistently meeting the deadlines set for your cohort and devoting at least 10 hours per week to your work.</li> 
 
\t <li>You are willing to contribute to the success of the program, including collaborating with fellow students and giving us feedback on how we can improve.</li> 
 
</ul> 
 

 
<p>Front-End Developer&nbsp;Specific Requirements:</p> 
 

 
<ul> 
 
\t <li>You can independently solve and describe your solution to a math or programming problem</li> 
 
\t <li>You have access to 
 
       </li></ul> 
 

 
        a computer with a broadband connection, on which you’ll install a professional code/text editor (<a href="http://www.sublimetext.com/">Sublime Text</a>&nbsp;or&nbsp;<a href="https://atom.io/">Atom</a>). 
 
\t <li>You are familiar with&nbsp;<a href="https://docs.webplatform.org/wiki/tutorials/Programming_-_the_real_basics">basic programming concepts</a>&nbsp;such as variables, conditions and loops.</li> 
 

 

 

 
       </div> 
 
     </section>

Answer 1

<style> 
    #content { 
     height: 50px; 
     overflow: hidden; 
    } 

    #content.open { 
     height: auto; 
    } 
</style> 

<script> 
    function seeMore(){ 
     $('#content').addClass('open'); 
    } 
</script> 

<div id="content"> 
    Your content... 
</div> 

<input type="button" onClick="seeMore();" value="SEE MORE" /> 

Answer 2

您可以添加MAX-heigth，溢出：隱藏到您的section.requirement。寫section.requirement.open用CSS 最大高度：汽車

當點擊查看更多按鈕，你可以使用jQuery toggleClass（「開」）

Answer 3

可以簡單地使用jQuery的動畫與切換。 編輯

$(document).ready(function(){ 
 
    $(".click").click(function(){ 
 
     $(".hide").animate({ 
 
      height: 'toggle' 
 
     }); 
 
    }); 
 
});

.hide{ 
 
    display:none; 
 
} 
 
.requirement{  
 
    
 
    background: url(http://gttcenter.com/themes/gttc_2016/images/requerment_bg.jpg); 
 
    color: #fff; 
 
    padding: 25px; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="requirement text-center"> 
 
      <h2 class="label-titr">Prerequisites and Requirements</h2> 
 
      <div class="whybuild"> 
 
       <div> <p>General Requirements:</p> 
 

 
<ul> 
 
\t <li>You are self-driven and motivated to learn. Participation in this program requires consistently meeting the deadlines set for your cohort and devoting at least 10 hours per week to your work.</li> 
 
\t <li>You are willing to contribute to the success of the program, including collaborating with fellow students and giving us feedback on how we can improve.</li> 
 
</ul> 
 

 
<p>Front-End Developer&nbsp;Specific Requirements:</p> 
 
<p class="click"> 
 
See More 
 
</p> 
 
<div class="hide"> 
 

 

 
<ul> 
 
\t <li>You can independently solve and describe your solution to a math or programming problem</li> 
 
\t <li>You have access to 
 
       </li></ul> 
 

 
        a computer with a broadband connection, on which you’ll install a professional code/text editor (<a href="http://www.sublimetext.com/">Sublime Text</a>&nbsp;or&nbsp;<a href="https://atom.io/">Atom</a>). 
 
\t <li>You are familiar with&nbsp;<a href="https://docs.webplatform.org/wiki/tutorials/Programming_-_the_real_basics">basic programming concepts</a>&nbsp;such as variables, conditions and loops.</li> 
 

 

 

 
       </div> 
 
       </div> 
 
     </section>