"Read More" in HTML widget?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
How can I create a block of text with an option to "Read More" by using the HTML widget in the sitebuilder, and not have to alter the CSS?

My friend who's website I'm building, has asked if she can have multiple sections on one page with a little snippet of info, then the option to Read More and drop down the additional text on the same page. I can't find a basic HTML to help me that won't require Javascript/CSS alteration (I'm really unskilled with that), and hoped that Yola could lend me a hand?

I really don't want to have to create a whole new page for every section of text...
Photo of catinthefreezer

catinthefreezer

  • 4 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi everyone!

Here's the code you put into an HTML widget at the top of your page once (don't add this multiple times because this just sets it up), I added some comments in the settings part so you know what each is for:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://tester3.yolasite.com/resources/javascript/jtruncate.js"></script>

<script type="text/javascript">
// Settings for script
$(document).ready(function() {
$('.text').jTruncate({
length: 200, /* The number of characters to display before truncating. */

minTrail: 0, /* The minimum number of "extra" characters required to truncate. This option allows you to prevent truncation of a section of text that is only a few characters longer than the specified length. */

moreText: "Read More", // The text to use for the "more" link.
lessText: "Read Less", // The text to use for the "less" link.
ellipsisText: "...", // The text to append to the truncated portion.
});
});

</script>



Now anywhere on the page you can add another HTML widget and just wrap the text in a paragraph tag with a class name of "text", like so:


<p class="text">Hello, here is some text that will truncate after 200 characters and a "read more" link (or whatever text is specified in the settings) will be appended to it. Here is some more text. Here is some more text. Here is some more text. Here is some more text. Here is some more text.</p>



As you can see, after you add that first code at the top it's very easy to add paragraphs of text that "truncate". If you want to change the color of the text, the size, font style, etc. you can add those rules in the "style" attribute, the font-family is a list of fonts, each one after the first being a fallback if the one in front of it is not installed on the user's computer:


<p class="text" style="color: green; font-size: 15px; font-family: Helvetica, Arial, sans-serif;">Hello, here is some text that will truncate after 200 characters and a "read more" link (or whatever text is specified in the settings) will be appended to it. Here is some more text. Here is some more text. Here is some more text. Here is some more text. Here is some more text.</p>



(Note: the style rules most be named this for the browser to render the style, i.e. "color", "font-size", "font-family", etc.)

I hope this helps! If you have any problems or questions, let me know.

Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You're welcome guys, I'm glad it worked good!
Photo of Taylor McFarlane

Taylor McFarlane

  • 1 Post
  • 0 Reply Likes
Hey all - I am trying to get this to work - and it isn't :( Does it have to be placed in a widget specifically? Is there any way to post this directly into the wordpress page itself - and have it work? Any advice would be greatly appreciated!

Thanks so much
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Taylor

You can add it to HTML or Text Widgets. I saw you mention Wordpress, do you refer to a Yola website at all? This is the Yola Support Forum, so we can only assist you with your Yola account. If you want to do this with your Wordpress website, you will need to contact their support.
Photo of Brian Kannard

Brian Kannard

  • 3 Posts
  • 0 Reply Likes
Is there an issue with Google crawling the text using a script like this?
Photo of Emmy

Emmy

  • 60 Posts
  • 6 Reply Likes
Hello Brian,
I don't see any reason why Google would not be able to crawl this as the script displays all the text in the source code. Google can't crawl something added with an iFrame to your site because the actual content isn't located in your source code. So as far as I can tell, this should be fine.

Emmy
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
Hi Ed,

Here's a method I use which currently works;

First use a text widget or html widget to write the text which you want to be showing upon page loading. Then directly below add the following code into a html widget.




<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block" }
else {
e.style.display="none" }
return true; }

</script>

<div>
<input type="button" class="mybutton" onclick="return toggleMe('para2')" value="Read More / Less"> </div>

<div id="para2" style="display:none">

<font style="font-family: Arial; font-size: 16px;">
<br>

INSERT TEXT YOU WANT TO SHOW ON BUTTON CLICK HERE. YOU CAN USE THE FONT STYLE TAG ABOVE TO MATCH THE FONT OF THIS TEXT TO THE TEXT IN THE EARLIER PARAGRAPH. YOU CAN ALSO CHANGE THE TEXT ON THE BUTTON, BY CHANGING THE 'READ MORE / LESS' ABOVE TO WHATEVER VALUE YOU WISH,

</font>

</div>



This basically gives you a toggle Show / Hide button. Clicking the button will show the text, clicking again will hide the text.

Here's an example in action:

http://jsfiddle.net/CNRUY/

Hope this helps!