zhilevan zhilevan - 1 year ago 72
CSS Question

How to Slide down part of element

I have a section with background image,my image height is

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 .

This is what I want to implement

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>

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

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

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

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>


Answer Source
    #content {
        height: 50px;
        overflow: hidden;

    #content.open {
        height: auto;

    function seeMore(){

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

<input type="button" onClick="seeMore();" value="SEE MORE" />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download