How do you make a 'show more' link?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I found from some viewers in feedback, that my homepage had alot of text and alot of people don't want to just read so much, so I want to make a medium sized text in font Trebuchet saying 'More Info' and when you click on it, three small paragraphs appear in the exact same font as the text above it, not in the html widget, and some words bold. Is this possible?

I've searched lots everywhere to find something like this, i found buttons, links but i prefer just text, like maybe on a spoiler expand text in a forum. Can someone please find a code for this?

Thanks.
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
  • unsure

Posted 7 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Sajid-M,

Since Shawn didn't reply with a code, you could just use this code: (doesn't require jQuery or any other JavaScript libraries)


<p id="already-here-p">

Your text that is already showing can be here.

<a href="#" id="show-more-link" onclick="document.getElementById('extend-section').style.display='block'; this.style.visibility='hidden'; return false;">[show more]</a>

</p>

<div id="extend-section" style="display:none;">

<p>

First paragraph to show when "show more" link is clicked.

</p>

<p>

Second paragraph to show when "show more" link is clicked.

</p>

<br />

<a href="#" onclick="document.getElementById('extend-section').style.display='none'; document.getElementById('already-here-p').style.display='block'; document.getElementById('show-more-link').style.visibility='visible'; return false;">[show less]</a>
</div>



Example: http://jsfiddle.net/mLLd3/

You can change the text to what you want. But make sure to keep the rest of the code the same.

If you have any questions, just ask. :)

Kind regards,
Nathan
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Thanks for this, I'll try it out!
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Wow, I didn't know this was possible.

Thank you so much Nathan, this was very helpful, all in one simple code, and it wasn't too hard to understand too!

In this code, you can customize anything! I am now happy to say that this topic can be closed as it has been answered :D

Thanks again!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'm glad I could help! :)
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Sajid-M,

Sorry if my code was a little difficult to understand.
I do usually code so my codes look complicated and unique.

Best Regards,
Shawn
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Well you have been very supportive so thanks very much!