0

I have this text :

Mount Kosciuszko is mainland Australia's highest mountain, at 2,228 metres above sea level. It is located on the Main Range of the Snowy Mountains in Kosciuszko National Park, part of the Australian Alps National Parks and Reserves in New South Wales.

I gonna show just a line of the above content, for more information user must click on the more button, how can I do this? data coming from API and I don't want to add CSS styles like display ane etc, it possible with javascript function? I mean like strpos, trim and other stuff just like PHP

Mohammad
  • 491
  • 5
  • 16
  • 1
    Does this answer your question? [show more/Less text with just HTML and JavaScript](https://stackoverflow.com/questions/20735726/show-more-less-text-with-just-html-and-javascript) – Berke Kaan Cetinkaya Nov 12 '20 at 19:12
  • @KaanCetinkaya it wasn't my answer, I want to cut some of the text lines, for instance, I want to display up from 0 to 200 characters, and the rest of it doesn't display – Mohammad Nov 12 '20 at 19:54
  • The answer was text.substring(0,100) – Mohammad Jun 27 '21 at 13:41

1 Answers1

1

Here is a general algorithm to show more and less activity

a live demo is here: https://repl.it/join/uptshekb-kaancetinkayasf

Code:

Html file

   <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  
  </head>
  <body>
    <p1 id="text"></p1>
  <button id="show">Show More</button>
  <script type="module" src="script.js"></script>
  </body>
</html>

Js File

const display = document.getElementById('text');
const button = document.getElementById('show');

let text = "Mount Kosciuszko is mainland Australia's highest mountain, at 2,228 metres above sea level. It is located on the Main Range of the Snowy Mountains in Kosciuszko National Park, part of the Australian Alps National Parks and Reserves in New South Wales."

let showingMore = false;
let newArr = [];

function moreLess(){
  let arr=[];
if(text.length>50){
  
  for(let i=0;i<50;i++){
    arr.push(text[i]);
  }
   newArr=arr.join('');
}
display.innerText = newArr;
}

function showMore(){
  if(showingMore==true){
    display.innerText = newArr;
    showingMore=false;  
    return;
  }
  if(showingMore==false){
    display.innerText = text;
    showingMore=true;  
    return;
  }

  }

moreLess();

button.addEventListener('click',showMore);