How to Slide down part of element

Question

I have a section with background image,my image height is 900px I want to show only part of my text as example 600 character over that section and when user click on SEE MORE it getting SlideDown To show all text .

a idea I have in mind is if text length is more than 600, put remains part in a '` then hide it, and when user click on SEE MORE I SlideDown that Span. what is the best solution for achieve this?

 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>
	<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>
	<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>
	<li>You can independently solve and describe your solution to a math or programming problem</li>
	<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>).
	<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

You can simply use animate jQuery with toggle. Edited

$(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>
	<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>
	<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>
	<li>You can independently solve and describe your solution to a math or programming problem</li>
	<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>).
	<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>

Answer 2

You can add max-heigth, overflow:hidden into your section.requirement. and write section.requirement.open with css max-height:auto

When click to see more button you can use jquery toggleClass("open")

Answer 3

<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" />