"Read More" in HTML widget?

  • 1
  • Question
  • Updated 2 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 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi,

So you don't want additional pages to store the follow on sections?
You don't want a js code to set it up for you?
You don't want to learn new skills?
But you want a magical micro-HTML code that will do this for you automatically.

This may not be available but will have a look.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi catinthefreezer,

HTML can't do this (HTML is structure of the page only), it will have to be JavaScript. But JavaScript goes perfectly in the HTML widget.

Would you like something like this: http://papermashup.com/demos/jtruncate/

I can give you the code for this, you won't have to do much work.

Nathan
Photo of catinthefreezer

catinthefreezer

  • 4 Posts
  • 0 Reply Likes
Exactly that, Nathan! Thank you!
Photo of HairBy Celine

HairBy Celine

  • 1 Post
  • 0 Reply Likes
Hi Nathan i am looking for something like that too how can i get the code?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi there, the code for this is in my reply a few posts down :)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I would recommend Nathan's approach for this.

Another option is to create large spaces between each section of text and set anchors at the beginning of each section with a "Go to" instruction at the end of each section. Yola have a Tutorial on this Creating HTML Anchor Links
Photo of catinthefreezer

catinthefreezer

  • 4 Posts
  • 0 Reply Likes
Thank you for your input, Gop, but that's not going to look very good on the page to be honest. I'm going to go with Nathan's suggestion.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Nathan

Would you mind sharing your code on this thread for all of us? We are curious ... :-). Thanks!
Photo of Julien Cosmo

Julien Cosmo

  • 3 Posts
  • 0 Reply Likes
I would also like to know about that code, Nathan ... :) Thanks.
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 Ed Gould

Ed Gould

  • 1 Post
  • 0 Reply Likes
I know this is an old thread but I used to use this script in my website a while ago but I can no longer get it to work, has something changed?
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!
Photo of Kc Tan

Kc Tan

  • 1 Post
  • 0 Reply Likes
stumble upon this topic. I used this and it worked but how do you get rid of the "read more/less" button once the text appears?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Kc Tan, 

The function described here are anchor links and they do not go away once they are clicked. You might want to do some research on how to "hide anchor links" if that's important to you but it doesn't sound like a great user experience to remove the ability to change the view back once clicked, unless I'm misunderstanding what you are trying to achieve. 
Photo of vicjodani

vicjodani

  • 1 Post
  • 0 Reply Likes
This is an excellent script and it works great.  Thank you!
(Edited)