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+
'<a href="#" class="read_more"><br/>read more...</a>'+
'<span class="more_text" style="display:none;">'+long_content+'</span>'); /* 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
<div class='comments_container'>
<img src='images/comment-icon.png'/>
<h1 class='comments_title'>Customer experience</h1>
<p class='customer_experience'>$customer_exp_one</p>
</div>
The paragraph in question is .customer_experience
.
I hope the below one will help you.
http://jsfiddle.net/X5r8r/1156/
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 {
display: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With