This project correctly shows text from above when the More button is clicked. It will also hide that new text when Less button is clicked. But I can't get the More button to display again in the final resting state. Might be my JS?
<nav class="drop-down-menu">
<input type="checkbox" class="activate" id="accordion-1"
name="accordion-1"><div class="drop-down">
<p class="one-edge-shadow">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. consectetur adipiscing elit. Nunc faucibus odio.
Vestibulum neque Lorem ipsum dolor sit amet.</p></div>
<label for="accordion-1" class="menu-title"><div id="togglthis"
class="inside-label-div" data-text-swap="Hide">
<img id="imgplus" src="https://i.imgur.com/Z87qmf6.png"></div>
<p class="inside-label-para">The Product includes not only all much can
be data to sort. Does not include numbers or other pole sidewalk.</p>
</label>
</nav>
var div = document.getElementById("imgplus");
div.addEventListener('click', function() {
if
(div.getAttribute("data-text-swap") == div.innerHTML) {
div.innerHTML = div.getAttribute("data-text-original");
document.getElementById('imgplus').src =
'https://i.imgur.com/Z87qmf6.png';
} else {
div.setAttribute("data-text-original", div.innerHTML);
div.innerHTML = div.getAttribute("data-text-swap");
document.getElementById('imgplus').src =
'https://i.imgur.com/95cB2LZ.png';
}
}, false);
A HEAVILY revised version here on codepen
may be you can try this :
let div = document.getElementById("imgplus");
div.addEventListener('click', function() {
if(div.parentElement.dataset.textSwap === "Show"){
div.parentElement.dataset.textSwap = "Hide";
this.src = 'https://i.imgur.com/95cB2LZ.png';
}else{
div.parentElement.dataset.textSwap = "Show"
this.src= 'https://i.imgur.com/Z87qmf6.png';
}
});
Here we are toggling the data-attribute of parent div between Hide to Show <div id="togglthis" class="inside-label-div" data-text-swap="Hide"> , and setting the src attr based on its value.
The problem what I found in your piece of code was , the attribute once set was not changed or reset again , and it kept holding the previous attribute value set.