One feature on my webpage is a "Read More" button that, when clicked, expands to reveal additional information (button not pressed). Here is how it appears once the user has clicked the button (button pressed). Despite my research on Stack Overflow, I have not been able to find a solution. My goal is to change the text on the button from "Read More" to "Read Less" after the user clicks on it.
For reference, here is the JS/CSS/HTML code:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 14px;
width: 30%;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
left: 0;
right: 0;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}<button class="accordion">Read More</button>
<div class="panel">
This content shows up when the user clicks "Read More"
</div>Any assistance would be greatly appreciated!