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);