<style>
    div.thecontent {
        float:left;
        position:relative;
        display:block;
        width:100%;
    }

    div.show-more{
        float:left;
        position:absolute;
        left:0;
        bottom:0;
        display:block;
        height:30px;
        padding-top:7px;
        background-color:#5a5a5a;
        color:#ffffff;
        cursor:pointer;
        width:100%;
        border-radius:4px;
    }
    </style>
    <script type="text/javascript">
    function toggle_visibility() {
        if (document.getElementById("show-content").style.height == "100px") {
        var t = document.getElementById("show-content").scrollHeight;
        document.getElementById("show-content").style.height = (t + 10).valueOf() + "px",
        document.getElementById("more-content").innerHTML = "<i class='fa fa-arrow-up'></i> Show Less <i class='fa fa-arrow-up'></i></i>"
        } else {
        document.getElementById("show-content").style.height = "100px",
        document.getElementById("more-content").innerHTML = "<i class='fa fa-arrow-down'></i> Show More <i class='fa fa-arrow-down'></i>"
        }
    }
    </script>

    <div class="thecontent" style="height:100px;overflow:hidden;transition:height 2s linear;-webkit-transition: height 2s linear;" id="show-content">

        ....Big wall of text goes here...

    <div id="more-content" class="show-more" style="text-align:center;" onclick="toggle_visibility()"><i class="fa fa-arrow-down"></i> Show More <i class="fa fa-arrow-down"></i></div>
    </div>
                                
                

We begin with some positioning and styling. The div with class 'show-more' is absolutely positioned inside and at the bottom of the div with class 'thecontent' and is the Show More/Show Less bar and is 30px in height. The parent div 'thecontent' in it's initial state is 100px in height so 70px of the content is showing. You can play with those to suit your needs.

When the bar is clicked it calls the toggle_visibility function and first checks the state of the div with id 'show-content' (same as div with class 'thecontent'). If it's in it's initial state of 100px in height it changes the height of the div to the scroll height of the content plus 10px. the transition CSS property in the inline style sets the speed and type of transition. It also sets the text in the bar to 'Show less' with up arrows

If the content is expanded it resets everything to it's initial state.

It's simple and straight forward and yet pretty cool!