digwr7 digwr7 - 3 months ago 6x
HTML Question

Expanding Text using <details> & <summary> HTML5 tags

I have a huge block of text that I only want to display so many characters before it shows a "view more" link.

So I did:

<p>Text being displayed when suddenly
<summary>View More</summary>
here comes the text to be expanded.</p>

This works, but it looks like this:

Text being displayed when suddenly

View More

here comes the text to be expanded.

So, it breaks the phrase with the summary tag in the middle.
I´ve been trying to make the text expand upwards or, in other words, making the summary appear below the expanded text, so that the phrase continues fluidly, but without success.

Tried moving the summary tag to the end, right before the closing details tag, but results are the same.

Is there a way to achieve this?


After lots of trial and error and then digging deeper in research mode I came across a solution.

Turns out, the best way I could find to achieve this is through JQuery instead.

(Big thanks to Max, whoever/wherever you are, for this pen https://codepen.io/maxds/pen/jgeoA/ that just saved me from trouble! - You may want to check it out to see, in action, what my question was all about, in case you´re wondering...)

So, following my example, I now have this:

<span class="more">Text being displayed when suddenly here comes the text to be expanded</span>

And that´s it for the Html part. I went for a span tag, but you could use a div the same way.

Now I only need to target that class via JQuery and determine how many characters I want it to display before it hides the text.

In my case, I went for 200 characters.

And here´s the JQuery code:

$(document).ready(function() {
// Configure/customize these variables.
var showChar = 200;  // How many characters are shown by default
var ellipsestext = "...";
var moretext = "VEJA MAIS >";
var lesstext = "MOSTRAR MENOS";

$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';



    if($(this).hasClass("less")) {
    } else {
    return false;

The "Show more" button is now handled through this code.

It´s a link really, and you can style it via its class ".more link" to have it be displayed any way you want. In my case I went for a button style, and used this CSS:

.morelink {
display: block;
float: right;
padding: .5em;
margin-top: .5em;
color: white;
background-color: rgb(63,72,71);
width: 50%;
text-align: center;    

Of course, width, margin and float parameters were decisions I made exclusively based on the layout I´m working with.

And, YES, I got what I wanted! Now the "Show More" button/link not only flows down with the text once it is revealed but also I can now change the text it shows once it does that (e.g. "show less") by simply addressing the appropriate var´s within the JQuery code (var moretext and var lesstext).


Hope this may help somebody else too.