guys, I'm trying something for my portfolio but I'm stuck and my brain just can't understand what I'm supposed to do can you guys please help?
So I have a div section that I'm hiding, then with a BUTTON(More) click it is supposed to show the div, and the BUTTON(More) should change to BUTTON(LESS). And I really want to make it work the way I'm doing it because I know it can work I'm just not too sure how. enter image description here
You can use HTMLelement.addEventListener to handle button click event and hide or show the div appropriately using the element.style.display property, the code below demonstrates how it works
const divE = document.getElementById('more');
const btn = document.getElementById('show');
handler = () => {
if (divE.style.display != 'none') {
// if the element is not hidden, hide the element and change button text to "more"
btn.innerHTML = 'More';
divE.style.display = 'none';
} else {
// if the element is hidden, show the element and change button text to "less"
btn.innerHTML = 'Less';
divE.style.display = 'block'
}
}
btn.addEventListener('click', handler)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="show">Less</button>
<div id="more">
IDk something here ig
</div>
</body>
</html>