Creating a “read more” link that extends the content on the page

Question

I would like to create a read more link that would extend a paragraph already being shown to reveal the entire text on the same page. If this could be solves with HTML5 and

Answer 1

I've created a jQuery/JS script that should do the trick: JSFiddle: http://jsfiddle.net/Starfire1337/pL9ve/

HTML:

 // Notice the custom JS is included AFTER jQuery
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.
Read More...

    
Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.

and in /js/site.js:

$(document).ready(function () {
    $('.nav-toggle').click(function () {
        var collapse_content_selector = $(this).attr('href');
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function () {
            if ($(this).css('display') == 'none') {
                toggle_switch.html('Show');
            } else {
                toggle_switch.html('Hide');
            }
        });
    });

});