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 CSS, I would like that, but I assume some type of script will be needed.

For example:

Example text

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.

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.

Read More >>

I would like the normal text to be shown with the "Read More >>" link below, and then the bold text will be revealed after clicking the link.

I also want to have an image in the hidden section, would this be possible?

Thanks in advance.

Answer 1

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";
}

Answer 2

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.

Answer 3

I created something easy to use

• set a class to the content "div"
• use "<!--more-->" to separate the click-to-display contents from the always visible contents
• everything else will be taking care of by css and js

HTML:

<div class="m-more-less-content">
Lorem ipsum dolor sit amet, <!--more--> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

See example here

Answer 4

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

});

Answer 5

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

Answer 6

Yes it is ... this is just a small example http://jsfiddle.net/QDg4P/3/

<div>
<h1>Example text</h1>
<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="#" onclick="show('example1')"> read more </a>
<p id="example1" style="display:none; font-weight: bold"><img src="http://tux.crystalxp.net/png/kami23-flower-tux-4037.png"/>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>

<script>
 function show(ele){
     document.getElementById(ele).style.display = 'block';   
}
</script>

Answer 7

Here's a pure HTML + CSS solution. You can style the "show more" checkbox using CSS to make it fit your needs, including hiding the checkbox part.

http://jsfiddle.net/T7eXL/

<div id="box">
    <p>Lorem ipsummy</p>
    <input type="checkbox" class="show-more"> Show more
    <div class="more">
        <p>Lorem</p>
    </div>
</div>

.more {
    display:none;
}

#box .show-more:checked + .more {
    display:block;
}

Answer 8

after text put that code

<p><a onclick="javascript:ShowHide('HiddenDiv')">Read more</a></p>
<div class="mid" id="HiddenDiv" style="display: none;">
    <font face="Arial" size="+2" color="#306Eff" align="right">YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE
 YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE
</div>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
    if(document.getElementById(divId).style.display == 'none')
    {
        document.getElementById(divId).style.display='block';
    }
    else
    {
        document.getElementById(divId).style.display = 'none';
    }
}
// ]]></script>

Answer 9

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

Answer 10

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>

Answer 11

Refer https://www.w3schools.com/howto/howto_js_expanding_grid.asp

Another Vanilla HTML, javascript and css example if you want something like this, and changes the box on click of Box 2 or Box 3. At this moment in time I have put cross button on the expanded div only but you can put it back on click of the box again :

HTML :

<!-- The grid: three columns -->
<div class="row">
    <div class="column" onclick="openTab('b1');" style="background: green;">Box 1</div>
    <div class="column" onclick="openTab('b2');" style="background: blue;">Box 2</div>
    <div class="column" onclick="openTab('b3');" style="background: red;">Box 3</div>
</div>

<!-- The expanding grid (hidden by default) -->
<div id="b1" class="containerTab" style="display: none; background: green">
    <!-- If you want the ability to close the container, add a close button -->
    <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
    <h2>Box 1</h2>
    <p>Lorem ipsum..</p>
</div>

<div id="b2" class="containerTab" style="display: none; background: blue">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
    <h2>Box 2</h2>
    <p>Lorem ipsum..</p>
</div>

<div id="b3" class="containerTab" style="display: none; background: red">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
    <h2>Box 3</h2>
    <p>Lorem ipsum..</p>
</div>

CSS:

/* The grid: Three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 50px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 20px;
  color: white;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Closable button inside the image */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

JS:

// Hide all elements with class="containerTab", except for the one that matches the clickable grid column
function openTab(tabName) {
  var i, x;
  x = document.getElementsByClassName("containerTab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}