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 Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Yes! This is Possible with a little JS.

I will make this soon...Once you finish these questions:

Do you also want a Show Less so once Show More is Clicked you can hide the paragraphs again?

Would you like it too save! Like if they click show more the paragraphs will this be there when you reload. Wouldn't that be cool! That would be easy to!
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Uhh first answer, yes I'd love a 'less info' text too!
And the rest... I have no idea what your talking about :/
Try and rephrase the last questions, and also, I don't see any question marks, and try and spell correctly until it's understandable, because it's confusing.
If you can't do this, then can someone else help translate the last 2 lines?
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
I'm trying to understand but, if you mean, 'after you reload, will the 'More Info' paragraphs be there?', then no, after you reload then i expect it to retract and show less info, but if you can't do it, then I don't mind.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Would you like it too save?
So when you click "Show More" for example, and then refresh. The paragraph will still be shown.

Sorry, I wrote that Paragraph above quiet fast. :/
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Finally Got the Code DONE!

Add this into an HTML Widget
Here's is the Javascript:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
function getCookie(c_name){var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i<ARRcookies.length;i++){x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);x=x.replace(/^\s+|\s+$/g,"");if (x==c_name){return unescape(y);}}}
function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;}
$(document).ready(function(){
$('#show_para').html("Show More ▼");
$('#hide_para').html("Show Less ▲");
var cookieyess=getCookie("showing");
if(cookieyess!==undefined&&cookieyess!==null&&cookieyess!==""){
$('#para_hidden').slideDown();
$('#show_para').hide();
$('#hide_para').show();
}
else{
$('#para_hidden').slideDown();
$('#show_para').show();
$('#hide_para').hide();
}});
$(document).ready(function(){
var cookieyess=getCookie("hiding");
if(cookieyess!==undefined&&cookieyess!==null&&cookieyess!==""){
$('#para_hidden').slideUp();
$('#show_para').show();
$('#hide_para').hide();
}
else{
$('#para_hidden').slideUp();
$('#show_para').hide();
$('#hide_para').show();
}});
$(document).ready(function(){
$('#hide_para').click(function(){
var cookieyes=getCookie("hiding");
if(cookieyes!==undefined&&cookieyes!==null&&cookieyes!==""){
$('#para_hidden').slideUp();
$('#show_para').show();
$('#hide_para').hide();
}
else{
$('#para_hidden').slideUp();
$('#show_para').show();
$('#hide_para').hide();
setCookie("hiding","yes",365);
setCookie("showing","yes",-1);
}});
$('#show_para').click(function(){
var cookieyes=getCookie("showing");
if(cookieyes!==undefined&&cookieyes!==null&&cookieyes!==""){
$('#para_hidden').slideDown();
$('#show_para').hide();
$('#hide_para').show();
}
else{
$('#para_hidden').slideDown();
$('#show_para').hide();
$('#hide_para').show();
setCookie("showing","yes",365);
setCookie("hiding","yes",-1);
}});});
</script>



Also add this into an HTML widget where you want the paragraphs:
Here's the HTML:


<div id="para_show">
<!--PARAGRAPHS THAT ARE TO BE Shown-->
</div>

<div id="para_hidden" style="display:none;">
<!--PARAGRAPHS THAT ARE TO BE HIDDEN FIRST-->
</div>
<br>
<!--BUTTONS ▼-->
<div id="show_para" style="display:none;cursor:pointer;"></div>
<div id="hide_para" style="display:none;cursor:pointer;"></div>



Need any Help Setting this up? Please tell me if you do.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I think that Sajid-M wanted not to have to use an HTML widget. But there is a way to put this into a text widget instead, but keeping the actual script in an HTML widget...
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Yes,
Nathan is right.

If you want the to put the HTML into a text widget, just click the HTML icon in the Text Editor toolbar:



And simply add the HTML inside the HTML editor that opens. Also make sure that the Javascript code is above the HTML. I suggest adding the Javascript in a HTML Widget at the top of the page.

Need any further assistance?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Wow.. thanks Shawn for all the help on this!
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Sanja,

As always your welcome.
I love helping people with any Javascript job as it gives me lots of Joy!
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Wow Shawn, thanks so much, I'll try it now and see if it works :D
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
It works perfectly, but a couple of little things, how do you make new paragraphs, not big, but new lines? At the moment the text I added it all in one big bunch, can I split it into different lines so that it won't be as hard to read? And can you change the color of the buttons and make them big and bold? Thanks for your help so much!
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Is anyone going to reply to this topic anymore? The problem isn't fully solved, can nobody help with this little bit?
It's been a while since anyone else has replied here, the question isn't fully answered, so why so much delay?
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
Hi Sajid-M, please give me an update on what you have done and achieved so far so we can take it from here and get this sorted out for you.
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
So far, Shawn has given me a code to add a small paragraph shown, then a button saying Show More, and after the button is clicked, text expands below with a short description.

I want it in several different parts, paragraphs as it is a big wall of text at the moment which is what I was avoiding from the start.
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
I'm not sure what happened, I must have accidentally deleted my reply, but I still need a little help, Shawn.
Can you please tell me how I can add more paragraphs in the hidden part?
It's because when the hidden text is revealed, it's in one big paragraph, not in two smaller paragraphs as I hoped.
Please get back to me as soon as possible.
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Hello Shawn,

Thanks for replying again, I think the code you entered should have something around it like this:
<!-- your code here -->
So that it shows up.
If you meant it to be like that, then explain further.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Shawn, you should wrap your code in code tags to display it in a code box like:

<code>
code goes here

</code>

That would output:


code goes here

Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Ah that's helpful, thanks for sharing that, in the future I will use that too.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem :) I use it all the time as it divides the code from the text.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
I fixed it if you still wanna use my code.
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
how about this (something easy) use a normal text capsule and add a short description of the actual article/content page ..... at the ending of this description, simply add "read more or show more" AND highlight this text (using your mouse). Simply click on the "link" icon/text shown in the blue bar (top of your dashboard) and select to where you would like the link to direct to. Yola basically does the rest for you.
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Hello Rynaldo,

That may be easy, but it's not what I'm looking for, I want the extra details of the description on the same page, and one of those span text codes.

Thanks for replying though!
Photo of RSPublishing

RSPublishing

  • 298 Posts
  • 9 Reply Likes
Oh i see, let me check into this and get back to you. Will have this sorted in no time.
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Okay, thanks for another quick reply!
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!