How to do a 'read more' link

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Hi, I am new here and am creating my first website. I want to post many articles on a page in my site called 'writing', but I want only the fist paragraph to show, with a 'read more' link button...can anyone tell me how to do this?

Thanks, c
Photo of sacredjourney1111

sacredjourney1111

  • 10 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello sacredjourney,

There are many ways to do this but I think the most succinct method is by using a piece of js.

Place this code into an HTML place holder say at the top of your page


<script type="text/javascript">
function toggle(obj) {
var obj=document.getElementById(obj);
if (obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block";
}
</script>


Then place this code with your specific writings where indicated in another HTML place holder at the position you wish your text to display.


<a href="javascript: void(0);" onClick="toggle('p1')">Partial contents of your writing (your synopsis)</a>
<div id="p1" style="display:none;">the rest of your written piece</div>
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Hey Gop, can you post up some changes for text color and font etc.
I was able to add my changes to the HTML, but I think they are in the wrong areas. Now when I attempt to preview the site, the HIDDEN text is already exposed and when I click on the highlighted text, the hidden text does disapear. so back to front at the moment ;)

Thanks in advance and no stress, just thought it would be cool adding to this forum post

:)
Photo of sacredjourney1111

sacredjourney1111

  • 10 Posts
  • 0 Reply Likes
Thanks so much for responding. Unfortunately I'm a little slow when it comes to this stuff lol. I want to have say 10 articles that show on the page...each one with a read more link after the first paragraph. How do I change the code for each one.

Thank you, c
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. I think that this approach will work:

If you can see the mnemonic p1 then I would replace p1 with p2, p3 p4 etc up to p10 both in the "toggle('p1))" position and in the div id="p1" position for the specific paragraphs. This should then allow you to have all the paras that you need. So you would reproduce that second bit of code with the various px's mentioned.

If i haven't made this clear for you I can expand this further as an attempt to clear the explanation. I have indicated the synopsis postion and the expanded para positions within the example code given: "partial contents....." and "the rest of your written piece"

There is going to be an issue and that is the phrase "read more". This is minor and I will think about a fix.
Photo of sacredjourney1111

sacredjourney1111

  • 10 Posts
  • 0 Reply Likes
Brilliant! Thanks so much for your help...hopefully I'll manage :)

Let me know if you think of a fix

Much appreciated

Thanks again, c
Photo of sacredjourney1111

sacredjourney1111

  • 10 Posts
  • 0 Reply Likes
Well unfortunately I did not have any success. I pulled an HTML wiget from the right hand options and placed it at the top of the page and cut and pasted the top script into the box.

Then I tried putting a text box with my article and placed another html wiget in the text box at the boint I wanted it to say 'read more' ...this didn't work
So then I tried putting my article in the html wiget box and the code at the place. this didn't work either.

Please don't laugh

I'm at a loss..and a little worried as this is the most succinct way!

As one can probably see I ned things to be explained in a VERY basic way

Thanks,
c
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi,

Can you tell me your published site address and I can have a look at what may be going on. I'm sure we can get this working between the two of us C. :)

If this doesn't work for some reason then there are a lot of other options we can try.
Photo of sacredjourney1111

sacredjourney1111

  • 10 Posts
  • 0 Reply Likes
Although my site is published it is still in construction stage. The address is mysticalchemyart.com . The section is in the writing page, but currently there is nothing there as I didn't publish the mistakes :). Are you saying that what I did should have worked, and if so which one. The problem I think is that I am incredibly unfamiliar with html. Seems like it should be simple! DO I put my text in a txt box ir in the html box? Do I put the code at the point I want the writing to end....
Thanks, c
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I hate giving answers like the one I am being asked to give :). but yes it should work :(

Repeat what you have already tried then we can work with something concrete.

C you really don't have to apologise for a work in progress at all. Even big sites are a continuous work in progress and early days are simply that. Knowing HTML is a learning curve and it does become familiar with exposure. You will be marking-up with the best of them soon I bet. Your enquiry initially shows your insight.

wrt placing your text within a text box: others have had success with this but I can say that I haven't approached mixed text and code in this way, I tend to place it all in an HTML widget and modify the styling with HTML, I guess a personal choice and experience, but you can try both and see what works best for you. I don't think you will get into problems.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Gop for your excellent help!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello sacredjourney111,

Please let us know if you're still struggling with this. Another alternative is to use our Yola blog page which will automatically set up a "read more link". If you're interested in this, please see: Creating a blog page.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
This would be difficult to setup with the break occurring exactly where you wanted it. The "read more" phrase position is determined by the blog facility rather than the author so for that reason I don't think it would work easily.
Photo of sacredjourney1111

sacredjourney1111

  • 10 Posts
  • 0 Reply Likes
Thanks guys. I ended up sorting the problem by putting the paragraph I wanted with a read more button linked to the full article on a new page (which is not visible in the menu bar). This way I have a page of paragraphs that lead to full articles on seperate pages. This was easy and exactly what I wanted.

Cheers, c
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Well done c
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Happy to hear you've sorted it out, C!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi all

Thank you for your excellent help on this thread, Gop.
If anyone is looking for another Javascript code to achieve a read more function, there is also this helpful thread on our forum which worked fine for me when I tested it.