Toggle function on html click event

Question

I'm trying to add a simple "Read more" button to a page. I managed to prepare a working function that hides the maximum characters within an element. And to call the function I've prepared a button in the HTML with a "onclick" event to call the function.

Now a couple things happen that shouldn't. The button should reveal the hidden text but the opposite happens and everytime the button is clicked more characters are removed until I'm left with only the dots even though I have a var that limits the characters to 15. I have spent too much time trying to figure this out knowing this is probably basic jQuery. I apologize if that is the case I just hope someone can point out what I'm doing wrong here.

HTML:

<button class="content-toggle" onclick="textCollapse()">Read more</button>

jQuery:

function textCollapse() {
  var limit = 15;
  var chars = jQuery(".field-content p").text();
  if (chars.length > limit) {
    var visiblePart = jQuery("<span class='visiblepart'> "+ chars.substr(0, limit) +"</span>");
    var dots = jQuery("<span class='dots'>... </span>");

    jQuery(".field-content p").toggle()
      .empty()
      .append(visiblePart)
      .append(dots)
  }
};

Max Koretskyi · Accepted Answer · 2016-10-16 10:30:11Z

2

I would save full text content into outer variable and keep it there. There is no need to requery text content every time a button is clicked. Also, it's better to have a variable that would store a state for the text - collapsed or not instead of comparing each time.

var fullText = jQuery(".field-content p").text();
var collapsed = false;

function textCollapse() {
    var limit = 15;
    if (collapsed) {
        var visiblePart = jQuery("<span class='visiblepart'> " + fullText + "</span>");
        jQuery(".field-content p")
                .empty()
                .append(visiblePart)

        collapsed = false;
    } else {
        var visiblePart = jQuery("<span class='visiblepart'> " + fullText.substr(0, limit) + "</span>");
        var dots = jQuery("<span class='dots'>... </span>");

        jQuery(".field-content p")
                .empty()
                .append(visiblePart)
                .append(dots)

        collapsed = true;

    }
}

Also, I don't think you need to call toggle() since all operations are performed synchronously and there's no need to hide p element before emptying and appending nodes.

edited Oct 16, 2016 at 10:30

answered Oct 15, 2016 at 15:58

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marrrc Over a year ago

Thanks Maximus! But I still get the full text when I load/refresh the page and the limit is not being applied when the text is collapsed (I did change chars to fullText). Also strange how I have to click the button twice before anything happens (removed "!" in if(collapsed) fixed that).

Max Koretskyi Over a year ago

@Marrrc, I updated the code. It should work Ok now. Please check and mark an anwer as accepted if it's working OK.

Marrrc Over a year ago

thanks that does work better but I still start with the full text. Once I click the button I'm left with only the dots at first then it just toggles between the dots and no text at all. other than that it does exactly what I want. I just need to figure out how to start with the collapsed text and to show more than just the dots when it's collapsed. I'd love to hear a solution but I think I can figure it out with the help you've provided so far. Thanks for your help!

Collectives™ on Stack Overflow

Toggle function on html click event

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related