HTML — How to make a «Read More» button
On my website, I have my blog and I want each card to have a read more button. I specifically want it to only show x words (NOT characters) when collapsed, and then show the whole text when expanded. I do not want to have a button that takes to another page that has the full content, as I am using my own built CMS which automatically adds posts from a form. I have tried readmore.js but that doesnt seem to work at all. It does nothing. I have also tried jQuery.dotdotdot, which also seems to not work This is a very strange thing that I have not been able to figure out. None other SO Q & A’s have helped that I have seen.
You could use php.net/manual/en/function.substr.php and after x characters insert a div with display:none containing the rest of the content. Make a button below that says read more on read more click make display block, or inline and hide button.
I don’t think that would work. This project work better if this was done client side (On that page with something like readmore.js) This needs to be resizable as I don’t use a m. subdomain. The current site is responsive already.
3 Answers 3
read more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel. erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
.loader1 < position: inherit; top:inherit; left: 0; right:0; text-align: center; z-index: 1; width: 50px; height: 50px; margin: auto; >.loader1:before < content: ''; display: block; padding-top: 200%; >.circular1 < -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; height: 100%; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; width: 100%; position: inherit; top: 0; bottom: 0; left: 0; right: 0; margin: auto; >.path1 < stroke-dasharray: 1, 200; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round; >@-webkit-keyframes rotate < 100% < -webkit-transform: rotate(360deg); transform: rotate(360deg); >> @keyframes rotate < 100% < -webkit-transform: rotate(360deg); transform: rotate(360deg); >> @-webkit-keyframes dash < 0% < stroke-dasharray: 1, 200; stroke-dashoffset: 0; >50% < stroke-dasharray: 89, 200; stroke-dashoffset: -35; >100% < stroke-dasharray: 89, 200; stroke-dashoffset: -124; >> @keyframes dash < 0% < stroke-dasharray: 1, 200; stroke-dashoffset: 0; >50% < stroke-dasharray: 89, 200; stroke-dashoffset: -35; >100% < stroke-dasharray: 89, 200; stroke-dashoffset: -124; >> @-webkit-keyframes color < 100%, 0% < stroke: #d62d20; >40% < stroke: #0057e7; >66% < stroke: #008744; >80%, 90% < stroke: #ffa700; >> @keyframes color < 100%, 0% < stroke: #d62d20; >40% < stroke: #0057e7; >66% < stroke: #008744; >80%, 90% < stroke: #ffa700; >.myDiv1 .loadmorex < position: absolute; left: 0; right:0; text-align: center; z-index: 1; margin: auto; color: #fff !important; letter-spacing:04px; text-decoration: none; background: #00aeef; padding: 10px; width:15%; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; >.loadmorex:hover Hello We Have Loaded Part 1
A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia
Note:This Lines are Used for demonstration
Hello We Have Loaded Part 1
A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia
Note:This Lines are Used for demonstration
var myVar; function myFunction() < // on button click below line displays loader : document.getElementById("loader1").style.display = "block"; // on button click below line hides button: document.getElementById("hideme").style.display = "none"; // set on-timeout display content in below line: myVar = setTimeout(showPage, 2000); >function showPage() This question is in a collective: a subcommunity defined by tags with relevant content and experts.
How do I add a read more link at the end of a paragraph?
I am trying to add a link to read more text at the end of a paragraph. I would like this link to display within the paragraph at the end like so: I want the paragraph to be appended with the . and the read more link. For now I don’t want the read more link to do anything as I will add my own function to it once I get the link in place. I am just struggling to find a way to get the link to appear like this. I have been looking at the following jquery script, however this seems to work on a character count and cuts the last word at whatever the character limit is and then doesn’t display the way I want it to (the link appears below the paragraph). It also already contains a function for what happens when the link is clicked which due to my lack of ability with jquery, I have been unsuccessful at editing out.
$(function() < /* to make sure the script runs after page load */ $('.customer_experience').each(function(event)< /* select all divs with the customer_experience class */ var max_length = 250; /* set the max content length before a read more link will be added */ if($(this).html().length >max_length)< /* check for content length */ var short_content = $(this).html().substr(0,max_length); /* split the content in two parts */ var long_content = $(this).html().substr(max_length); $(this).html(short_content+ '
read more. '+ ''); /* Alter the html to allow the read more functionality */ $(this).find('a.read_more').click(function(event)< /* find the a.read_more element within the new html and bind the following code to it */ event.preventDefault(); /* prevent the a from changing the url */ $(this).parents('.customer_experience').find('.more_text').show(); /* show the .more_text span */ >); > >); >); Do I need to use jQuery at all to get the result I am looking for? Can this be done with CSS alone? I don’t really write jQuery at all so I am a bit lost. Any help or hints at where I can go with this would be much appreciated. Edited to add HTML Mark-up
Customer experience
$customer_exp_one
Do you want the link to come after the last word before a character count is reached, after a word count is reached, or after content exceeds a block of specified width/height?
5 Answers 5
I hope the below one will help you.
body, input < font-family: Calibri, Arial; margin: 0px; padding: 0px; >a < color: #0254EB >a:visited < color: #0254EB >#header h2 < color: white; background-color: #00A1E6; margin: 0px; padding: 5px; >.comment < width: 400px; background-color: #f0f0f0; margin: 10px; >a.morelink < text-decoration: none; outline: none; >.morecontent span
This is very helpful. Thank you. I do not want the div to expand when the more link is clicked though. Can this be edited out of the jquery? I just want the link to display so that I can add my own function to it. I am going to add a jquery pop up window to display the text in full.
Excellent! Your answer best fits my requirements. I am going to attempt to combine the solution presented by lordvlad with your solution so that the end word is not cut. Thank you very much for your time and effort.
@Richard Bell, I notice this does not work if the text in the read more section has other elements in it. Is there a good way to get around that?
For cutting off paragraphs. This script checks the paragraph count, not the word count.
JS (With Jquery)
$(document).ready(function() < /* Count of paragraphs shown */ var cutCount = 2; $("#testID p").each(function (i) < i++; if(i == cutCount) < $(this).append(' Read more') > if(i > cutCount) < $(this).hide(); >>); >); Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas lobortis mi, quis convallis arcu interdum id. Nunc velit justo, congue ac vestibulum eu, sodales sed nulla. Nam semper egestas nunc, placerat suscipit lorem fringilla sit amet. Etiam id metus quis tellus luctus rhoncu
Donec euismod, dui aliquam vestibulum rutrum, urna ipsum luctus justo, in eleifend tellus ligula et elit. Morbi gravida lacinia magna quis faucibus. Duis arcu ligula, euismod sed ornare quis, posuere ac quam. Sed orci metus, pretium ut blandit sed, ullamcorper in eros. Mauris at euismod diam. Quisque auctor congue erat et varius. Nulla odio orci, convallis non fringilla vel.
Curabitur a velit eu lacus vestibulum vehicula. Proin mi velit, tempor quis convallis vulputate, adip
Nullam eget pulvinar arcu. Nam tellus tortor, luctus non rutrum eget, condimentum ac lectus. Nulla diam tellus, aliquet non auctor nec, bibendum nec orci. Proin rhoncus sodales sapien, sit amet eleifend erat sagittis quis. Ut et urna et erat venenatis convallis at sit amet sem. Quisque tempus sodales ornare. Maecenas eget nisi et ligula facilisis dictum.
Etiam lectus dolor, tincidunt a ultricies et, vehicula ut lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean bibendum suscipit nunc sit amet ultrices. Praesent nunc velit, dignissim eget tincidunt non, varius at velit. Aliquam ac interdum lectus. Nulla a ante lacinia arcu suscipit suscipit a nec mauris. In sed tempor massa. Donec luctus dapibus dolor, vel mattis justo pulvinar eget. Pellentesque scelerisque dolor ut erat cursus ornare. In in nunc et tellus consequat convallis id sed est. Integer dictum fermentum tempus. Ut lobortis ante vel ante condimentum lacinia. Donec malesuada pretium sapien, et euismod turpis faucibus at. Duis vel turpis ultrices enim viverra vestibulum vitae sed sapien.