Este proyecto muestra correctamente el texto de arriba cuando se hace clic en el botón Más. También ocultará ese nuevo texto cuando se haga clic en el botón Menos. Pero no puedo hacer que el botón Más vuelva a mostrarse en el estado de reposo final. ¿Podría ser mi 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);Una versión MUY revisada aquí en codepen
puede ser que puedas probar esto:
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'; } }); Aquí estamos alternando el atributo de datos del div principal entre Ocultar para mostrar <div id="togglthis" class="inside-label-div" data-text-swap="Hide"> , y configurando el atributo src en función de su valor.
El problema que encontré en su pieza de código fue que el atributo una vez establecido no se cambió ni se restableció nuevamente, y mantuvo el valor del atributo anterior establecido.