Read more text

alanjg
21 Posts
alanjg posted this 24 January 2020
Ask a Question

I'm creating a HTML based website and have section of long text which I really need to show more and less by clicking a button or text link. I'm assuming that this is not in nicepage as of yet?

I have tried various ideas, like

<details>

<summary>Details</summary>
Something small enough to escape casual notice.

But its too basic.

Looking more at this https://www.viralpatel.net/dynamically-shortened-text-show-more-link-jquery/ at it seems to be more what i want.

Can anyone help?

I&#39;m creating a HTML based website and have section of long text which I really need to show more and less by clicking a button or text link. I&#39;m assuming that this is not in nicepage as of yet? I have tried various ideas, like &lt;details&gt; <summary>Details</summary> Something small enough to escape casual notice. But its too basic. Looking more at this https://www.viralpatel.net/dynamically-shortened-text-show-more-link-jquery/ at it seems to be more what i want. Can anyone help?

Last edited 24 January 2020 by alanjg

Vote to pay developers attention to this features or issue.
5 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 27 January 2020

Hi,

You can use the solution found. For this please follow these suggestions:

  1. add "comment more" class to the text control with the text that you want to make short
  2. insert the recommended CSS to the Page Properties >> CSS. But we suggest that you remove common link styles to avoid problems with the page. It should be enough:
    a.morelink {
    text-decoration:none;
    outline: none;
    }
    .morecontent span {
    display: none;
    }

  3. add recommended js to the page Properties >> HTML >> Additional HEAD HTML. Please use this instruction on hot to add external js code:
    https://nicepage.com/doc/article/29438/how-to-run-custom-jquery-in-nicepage-website-builder
    The code should look like:

    <script>
    window.onload = function() {
    var showChar = 100;
    var ellipsestext = "...";
    ......
    $(this).prev().toggle();
    return false;
    });
    }
    </script>

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, You can use the solution found. For this please follow these suggestions: 1. add "comment more" class to the text control with the text that you want to make short 2. insert the recommended CSS to the Page Properties >> CSS. But we suggest that you remove common link styles to avoid problems with the page. It should be enough: a.morelink { text-decoration:none; outline: none; } .morecontent span { display: none; } 3. add recommended js to the page Properties >> HTML >> Additional HEAD HTML. Please use this instruction on hot to add external js code: https://nicepage.com/doc/article/29438/how-to-run-custom-jquery-in-nicepage-website-builder The code should look like: &lt;script&gt; window.onload = function() { var showChar = 100; var ellipsestext = "..."; ...... $(this).prev().toggle(); return false; }); } &lt;/script&gt; ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
alanjg
21 Posts
alanjg posted this 02 February 2020

Hi Olivia,

So I managed to get it to do what i wanted, except, that it seems to leave a big gap between articles. The Bottom margin function can only adjust for so much. Any ideas?

EDIT: think i have sorted it. Changed this in css.

.comment {
width: 93%;
margin: auto;

Hi Olivia, So I managed to get it to do what i wanted, except, that it seems to leave a big gap between articles. The Bottom margin function can only adjust for so much. Any ideas? EDIT: think i have sorted it. Changed this in css. .comment { width: 93%; margin: auto;

Last edited 03 February 2020 by alanjg

Support Team
Support Team posted this 03 February 2020

Hi Alan,

We glad that you solved this issue. Please let us know if you have any further questions about Nicwpage.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Alan, We glad that you solved this issue. Please let us know if you have any further questions about Nicwpage. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
alanjg
21 Posts
alanjg posted this 08 February 2020

Hello and thanks for the reply.

It works well on desktop, but not on mobile. So I will have to work on that a bit more.

Hello and thanks for the reply. It works well on desktop, but not on mobile. So I will have to work on that a bit more.
Support Team
Support Team posted this 10 February 2020

Hi Alan,

OK, please let us know if you need further help.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Alan, OK, please let us know if you need further help. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
You must log in or register to leave comments