Q:

A drop down/minimizable PARAGTAPHS/text box in HTML

I am trying to create a drop down paragraph for my website.
It is similar to a drop down menu but a whole paragraph  with centering and a font. I have seen a number of drop down menu's but they don't seem to support large text. The idea would be for a bar say:
===click here to read about====
and when you click it the paragraph will pop out underneath.
The plan is to have a few of them in order. This is to save website space.
So minimizeable paragraphs in HTML

A:

I came upon your post looking for the same.
Here are some that are very nice that I have tried in case others come upon this post also:
'Pure CSS read more toggle': (with a clickable button as per your request): https://codepen.io/Idered/pen/AeBgF
'Readmore.js': http://jedfoster.com/Readmore.js/ 
And the one I went with:
'jQuery Read More/Less Toggle': https://codepen.io/maxds/pen/jgeoA
Some notes for the Read more/less for beginners (me):
1. The codepen exported zip file contains two sets of closing body and html tags.
2. html code counts as characters when setting how many characters to display in Show less box (index.js). Less by 6. After last text it will add: ...
3. In html inserting a !--comment after: span class="more" breaks it, at least for me.
4. To change link color of Show more/less for example in css:
a.morelink:link {color:#58534d; TEXT-DECORATION: none}
a.morelink:visited {color:#58534d; TEXT-DECORATION: none}
a.morelink:active {color:#f5f5dc; TEXT-DECORATION: none}
a.morelink:hover {color:#f5f5dc; TEXT-DECORATION: none}

$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";
    

    $('.more').each(function() {
        var content = $(this).html();
 
        if(content.length > showChar) {
 
            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);
 
            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
 
            $(this).html(html);
        }
 
    });
 
    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
.morecontent span {
    display: none;
}
.morelink {
    display: block;
}
<html>
  <head>
    <title>jQuery Read More/Less Toggle Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  </head>
  <body>
    <span class="more">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
    <br><br>
    <div class="more">
      Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
    </div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  </body>
</html>

