Question 245895 in Html Question posted in
Some basic documentation can be found here.

Html – Django Read more, Read less text

I am looking for a way to display only a part of the Overview initially and after clicking Read more, the rest is displayed.

I have this implementation of Read more – Read less in Django:

HTML:

<p><strong>Overview:</strong>
   <span class="overview">{{ game.overview|default:"N/A"|slice:"300"}}</span>
   {% if game.overview|length > 300 %}
     <span class="dots">...</span>
     <span class="more" style="display: none;">{{ game.overview|default:"N/A"|slice:"300:" }}</span>
    <button class="read-button" onclick="readMore(this)">[Read more...]</button>
    {% endif %}
</p>

JavaScript:

function readMore(button) {
  var parent = button.parentNode;
  var dots = parent.querySelector(".dots");
  var moreText = parent.querySelector(".more");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    button.innerHTML = "[Read more...]";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    button.innerHTML = "[Read less...]";
    moreText.style.display = "inline";
  }
}

My problem is that when the text get’s sliced inside a word like in this example:

Created in Unity, and designed to be played in-browser, players make a
series of moral and dialogue choices within each chapter, before being
presented a larger question at the end of eac … [Read more…]

When I am clicking the [Read more…], the output is like this and the word ‘each’ get’s separated where the slice occurred.:

Created in Unity, and designed to be played in-browser, players make a
series of moral and dialogue choices within each chapter, before being
presented a larger question at the end of eac h chapter, asking what
should happen next in the story.

What should I do so that when the slicing happens inside a word it is not separated when clicking the button.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have managed to solve my problem! Just in case someone has a similar issue, this is how I managed to do it:

    HTML:

    <p><strong>Overview:</strong>
      <span class="overview">{{ game.overview|default:"N/A"|truncatewords_html:"50" }}</span>
      <span class="full-text" style="display: none;">{{ game.overview|default:"N/A" }}</span>
      <button class="read-button" onclick="readMore(this);">[Read more...]</button>
    </p>

    JS:

    function readMore(button) {
    var parent = button.parentNode;
    var truncatedText = parent.querySelector(".overview");
    var fullText = parent.querySelector(".full-text");

  if (truncatedText.style.display === "none") {
      truncatedText.style.display = "inline";
      fullText.style.display = "none";
      button.innerHTML = "[Read more...]";
  } else {
      truncatedText.style.display = "none";
      fullText.style.display = "inline";
      button.innerHTML = "[Read less...]";
    }
  }

  2. 0

    You are just hiding and showing text with js without identiying if the word which will show on Read more button have some space between last character and newly shown paragraph.

    I think you need to change your js code to slice at the last space character.

    function readMore(button) {
  var parent = button.parentNode;
  var dots = parent.querySelector(".dots");
  var moreText = parent.querySelector(".more");
  var originalText = parent.querySelector(".overview").textContent;

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    button.innerHTML = "[Read more...]";
    moreText.style.display = "none";
    parent.querySelector(".overview").textContent = originalText.slice(0, 300);
  } else {
    dots.style.display = "none";
    button.innerHTML = "[Read less...]";
    moreText.style.display = "inline";
    parent.querySelector(".overview").textContent = originalText;
  }
}
    <p><strong>Overview:</strong>
   <span class="overview">
        Created in Unity, and designed to be played in-browser, players 
        make a series of moral and dialogue choices within each 
        chapter, before being presented a larger question at the end of 
        each chapter, asking what should happen next in the story.
   </span>
     <span class="dots">...</span>
     <span class="more" style="display: none;">
          TEXT TO DISPLAY WHEN USER CLICKS READ MORE (in you django 
           template it would be {{ game.overview|default:"N/A"|slice:"300:" }})
     </span>
     <button class="read-button" onclick="readMore(this)">[Read more...]</button>

</p>

    With this it will look for last word, if the last word have some space between newly text after button click.

    And the problem was in js it got nothing to do with django.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search