CODEWITHSUNDEEP
javascripthtmlcss
Somethingwhatever
Somethingwhatever

Reputation: 1348

Hide/Show text using javascript?

i have an issue here while trying to toggle text. I have a text which is truncated and how can i switch back and forth between the truncated text and original text on button click?

link to the pen.

var myButton = document.getElementById('toggle_text')
var text = document.getElementById('original_text')
console.log(text)

var truncate = function(elem, limit, after) {

  // Make sure an element and number of items to truncate is provided
  if (!elem || !limit) return;

  // Get the inner content of the element
  var content = elem.textContent.trim();

  // Convert the content into an array of words
  // Remove any words above the limit
  content = content.split(' ').slice(0, limit);

  // Convert the array of words back into a string
  // If there's content to add after it, add it
  content = content.join(' ') + (after ? after : '');

  // Inject the content back into the DOM
  elem.textContent = content;

};

var elem = document.querySelector('.truncate');
truncate(elem, 7, '...');


function switchText() {

}
<div class="truncate" id="original_text">
  Port tender gun spanker lanyard heave to topmast. Heave down draught piracy loaded to the gunwalls mizzenmast topsail Brethren of the Coast. Lanyard snow Jack Ketch swing the lead maroon spike black jack.
</div>

<div>
  <button id="toggle_text" onClick='switchText()'>Toggle Between truncate and Original Text</button>
</div>

Thank you in advance guys.

Upvotes: 1

Views: 149

Answers (3)

Jacob Helton
Jacob Helton

Reputation: 173

I would consider viewing S.Serpooshan's answer on a similar question. Typically this can be accomplished with just CSS and will be a better way to maintain the state of the page.

Rather than having to store your text as a variable in JS, it can just be hidden from the DOM flow but still be easily accessed.

Upvotes: 2

APAD1
APAD1

Reputation: 13666

You can accomplish this with a lot less code:

var myButton = document.getElementById('toggle_text');
var textCont = document.getElementById('original_text');
var text = textCont.innerText;
var shortText = text.substring(0, 7) + '...';

myButton.addEventListener('click', function() {
  if (textCont.innerText === text) {
    textCont.innerText = shortText;
  } else {
    textCont.innerText = text;
  }
}, false);
<div class="truncate" id="original_text">
  Port tender gun spanker lanyard heave to topmast. Heave down draught piracy loaded to the gunwalls mizzenmast topsail Brethren of the Coast. Lanyard snow Jack Ketch swing the lead maroon spike black jack.
</div>

<div>
  <button id="toggle_text">Toggle Between truncate and Original Text</button>
</div>

Upvotes: 2

Below the Radar
Below the Radar

Reputation: 7635

You could save the full content text and the truncated state in variables like this:

var myButton = document.getElementById('toggle_text')
var text = document.getElementById('original_text')
console.log(text)

var truncate = function(elem, limit, after) {

  // Make sure an element and number of items to truncate is provided
  if (!elem || !limit) return;

  // Get the inner content of the element
  var content = elem.textContent.trim();

  // Convert the content into an array of words
  // Remove any words above the limit
  content = content.split(' ').slice(0, limit);

  // Convert the array of words back into a string
  // If there's content to add after it, add it
  content = content.join(' ') + (after ? after : '');

  // Inject the content back into the DOM
  elem.textContent = content;
  truncated = true;
};

var elem = document.querySelector('.truncate');
var fullText = elem.textContent;
var truncated = false;
truncate(elem, 7, '...');


function switchText() {
    var elem = document.querySelector('.truncate');
    if (truncated) {
      elem.textContent = fullText;
      truncated = false;
    } else {
      truncate(elem, 7, '...');
    }
     
}
<div class="truncate" id="original_text">
  Port tender gun spanker lanyard heave to topmast. Heave down draught piracy loaded to the gunwalls mizzenmast topsail Brethren of the Coast. Lanyard snow Jack Ketch swing the lead maroon spike black jack.
</div>

<div>
  <button id="toggle_text" onClick='switchText()'>Toggle Between truncate and Original Text</button>
</div>

Upvotes: 2

Related Questions