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

后端未结

关注

 10  2145

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

相关标签:

10条回答

太阳男子

2021-01-03 06:32

More advanced version if your text is dynamic or coming from a database.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add Read More Link</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    var maxLength = 300;
    $(".show-read-more").each(function(){
        var myStr = $(this).text();
        if($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
            $(this).append('<span class="more-text">' + removedStr + '</span>');
        }
    });
    $(".read-more").click(function(){
        $(this).siblings(".more-text").contents().unwrap();
        $(this).remove();
    });
});
</script>
<style>
    .show-read-more .more-text{
        display: none;
    }
</style>
</head>
<body>    
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p class="show-read-more">This is a very long paragraph...</p>
</body>
</html>

0 讨论(0)

谎友^

2021-01-03 06:37

A vanilla JS alternative:

The HTML:

<p>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.</p>
<div id="more" style="display:none;">
    <p>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.</p>
    <img..../>
</div>
<a href="javascript:showMore()" id="link">Read More >></a>`

The JS:

function showMore(){
    //removes the link
    document.getElementById('link').parentElement.removeChild('link');
    //shows the #more
    document.getElementById('more').style.display = "block";
}

0 讨论(0)

余生分开走

2021-01-03 06:40

You can do it, change the property of CSS via Javascript.

element.style.display = 'block';

JS code

function read_more() {
document.getElementById('hidden-first').style.display = 'block';
}

document.getElementById('read-more').addEventListener('click', read_more);

See this code on JSfiddle

0 讨论(0)

挽巷

2021-01-03 06:44

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

HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="/js/site.js"></script> // Notice the custom JS is included AFTER jQuery
<p>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.</p>
<a href="#collapse" class="nav-toggle">Read More...</a>
<div id="collapse" style="display:none">
    <p>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.</p>
</div>

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');
            }
        });
    });

});

0 讨论(0)

迷失自我

2021-01-03 06:48

There is some really grateful plugins out there uses jquery. Here is what i found

https://github.com/jedfoster/Readmore.js

The required markup for Readmore.js is also extremely lightweight and very simple. No need for complicated sets of div s or hardcoded class names, just call .readmore() on the element containing your block of text and Readmore.js takes care of the rest.

0 讨论(0)
发布评论:

提交评论
- 加载中...

广开言路

2021-01-03 06:49

If you want something like this (have read more element after text) and you also have multiple dynamic elements:

Every month first 10 TB are are not charged. All other traffic... Read more

HTML&CSS:

<small class="truncate_string_multilines block-with-text" id="multiline_block" data-initial_value="Every month first 10 TB are are not charged. All other traffic (incoming and outgoing) is charged <a href="" class="morelink_multi">Read more</a>">Every month first 10 TB are are not charged. All other traffic... <a href="#" class="morelink_multi">Read more</a></small> 

.block-with-text {
     height: 4.2em;
}
small {
    font-weight: 400;
    font-size: 0.875rem;
    display: inline-block;
    line-height: 1.4;
}

JS&JQUERY

var initial_string = [], wordArray = '';
function ellipsizeTextBox(class_name) {
    var el = document.getElementsByClassName(class_name);
    for (i = 0, len = el.length; i < len; i++) {
        initial_string[i] = el[i].innerHTML;
        wordArray = el[i].innerHTML.split(' ');
        while(el[i].scrollHeight > el[i].offsetHeight) {
            wordArray.pop();
            el[i].innerHTML = wordArray.join(' ') + '... ' + "<a href=\"#\" class=\"morelink_multi\">" + moretext + "</a>";
            }
            el[i].setAttribute("data-initial_value", initial_string[i]);
        }
    }



$("body").on("click",".morelink_multi", function(){
    var this_element = $(this),
        parent_of_link = $(this).parent();
    if(this_element.hasClass("less")) {
        this_element.removeClass("less");
        this_element.html(moretext);
        parent_of_link.addClass('block-with-text');
        ellipsizeTextBox('truncate_string_multilines');
    } else {
        parent_of_link.removeClass('block-with-text');
        parent_of_link.html('');
        parent_of_link.html(parent_of_link.data('initial_value') + " <a href=\"#\" class='morelink_multi less'>"+ lesstext + "</a>");
    }
});

0 讨论(0)

1 2 下一页