How can JavaScript be used to toggle the visibility of text on a webpage

Question

How can JavaScript be used to toggle the visibility of text on a webpage

Can anyone help me with a problem I'm having toggling text? I have a truncated text and I want to be able to switch back and forth between the truncated text and the original text on button click.

Here is a 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>

Appreciate any help on this. Thanks in advance.

javascript html css

Answer 1

Answer №1

To store the entire content text along with the truncated state, you can create variables in the following manner:

var displayButton = document.getElementById('toggle_display')
var textContent = document.getElementById('full_textContent')
console.log(textContent)

var truncateText = function(element, limit, appendix) {

  // Ensure that an element and limit for truncation are provided
  if (!element || !limit) return;

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

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

  // Convert the array of words back to a string
  // Append the specified text after truncation, if any
  content = content.join(' ') + (appendix ? appendix : '');

  // Update the DOM with the truncated content
  element.textContent = content;
  isTruncated = true;
};

var selectedElement = document.querySelector('.truncated-section');
var fullContent = selectedElement.textContent;
var isTruncated = false;
truncateText(selectedElement, 8, '...');


function toggleContent() {
    var selectedElement = document.querySelector('.truncated-section');
    if (isTruncated) {
      selectedElement.textContent = fullContent;
      isTruncated = false;
    } else {
      truncateText(selectedElement, 8, '...');
    }
}

<div class="truncated-section" id="full_textContent">
  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_display" onClick='toggleContent()'>Toggle Between Truncated and Full Text</button>
</div>

Answer 2

To store the entire content text along with the truncated state, you can create variables in the following manner:

var displayButton = document.getElementById('toggle_display')
var textContent = document.getElementById('full_textContent')
console.log(textContent)

var truncateText = function(element, limit, appendix) {

  // Ensure that an element and limit for truncation are provided
  if (!element || !limit) return;

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

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

  // Convert the array of words back to a string
  // Append the specified text after truncation, if any
  content = content.join(' ') + (appendix ? appendix : '');

  // Update the DOM with the truncated content
  element.textContent = content;
  isTruncated = true;
};

var selectedElement = document.querySelector('.truncated-section');
var fullContent = selectedElement.textContent;
var isTruncated = false;
truncateText(selectedElement, 8, '...');


function toggleContent() {
    var selectedElement = document.querySelector('.truncated-section');
    if (isTruncated) {
      selectedElement.textContent = fullContent;
      isTruncated = false;
    } else {
      truncateText(selectedElement, 8, '...');
    }
}

<div class="truncated-section" id="full_textContent">
  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_display" onClick='toggleContent()'>Toggle Between Truncated and Full Text</button>
</div>

Answer 3

Answer №2

You can achieve the same result with a more concise code:

const btn = document.getElementById('toggle_text');
const originalText = document.getElementById('original_text');
const text = originalText.innerText;
const shortText = text.substring(0, 7) + '...';

btn.addEventListener('click', function() {
  if (originalText.innerText === text) {
    originalText.innerText = shortText;
  } else {
    originalText.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>

Answer 4

You can achieve the same result with a more concise code:

const btn = document.getElementById('toggle_text');
const originalText = document.getElementById('original_text');
const text = originalText.innerText;
const shortText = text.substring(0, 7) + '...';

btn.addEventListener('click', function() {
  if (originalText.innerText === text) {
    originalText.innerText = shortText;
  } else {
    originalText.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>

Answer 5

Answer №3

If you're looking for insights, it might be worthwhile to check out S.Serpooshan's solution to a similar query. Oftentimes, achieving this goal can be as simple as using CSS alone, which offers a more efficient way to manage the page's status.

Instead of storing your text as a JavaScript variable, you can opt to conceal it from the Document Object Model (DOM) while still maintaining easy access to it.

Answer 6

If you're looking for insights, it might be worthwhile to check out S.Serpooshan's solution to a similar query. Oftentimes, achieving this goal can be as simple as using CSS alone, which offers a more efficient way to manage the page's status.

Instead of storing your text as a JavaScript variable, you can opt to conceal it from the Document Object Model (DOM) while still maintaining easy access to it.

How can JavaScript be used to toggle the visibility of text on a webpage

Answer №1

Answer №2

Answer №3

Similar questions

Preventing the display of AngularJS HTML tags while the app is being loaded

Steps for inserting a button within a table

Even though I have the image button's ID, I am unable to successfully click on it

Issue with Material UI tabs: TypeError - Unable to access property 'charAt' as it is undefined

A guide on using JavaScript to obtain the original calculation for a specific equation once a checkbox has been unchecked

What is the best way to blend a portion of an image into a div?

how to ensure a consistent property value across all scopes in AngularJS

Using a computed property setter in Vue.js/Javascript while focusing on a datepicker can lead to crashing the browser

Click on any checkbox to select all checkboxes at once

Using JavaScript to retrieve the updated timestamp of a file

Remove the div of the previous selection in jQuery and add the current selection by appending it, ensuring only one selection per row is allowed when

Avoid working on the script for the element in the partial view during the event

Action of Submit Button Based on Field Matching Another Form

Combining two different arrays in JavaSscript to create a single array

What is the best way to implement switchMap when dealing with a login form submission?

What is the most efficient way to perform multiple socket writes using a single active socket connection to an Express web server?

I have just started a new project in Vue and noticed that the app div has some extra margin around it. Can anyone

Error: $this.text is throwing a TypeError and is not working as a function

positioning of multiple buttons in a customized header for mui-datatables

Fading colored images and backgrounds using Javascript