soy nuevo en javascript
Y estoy intentando diseñar el botón "mostrar más".
Agregué un texto y una flecha hacia abajo debajo, pero cuando hago clic en él, aparece el botón Mostrar menos "No sé cómo aplicar estilo" con contenido oculto, luego, cuando vuelvo a hacer clic, aparece el botón Mostrar más con sin icono o estilo.
function toggleText() { var showMoreText = document.getElementById("more"); var buttonText = document.getElementById("moreButton"); if (startpoint.style.display === "none") { showMoreText.style.display = "none"; startpoint.style.display = "inline"; buttonText.innerHTML = "Show More"; } else { showMoreText.style.display = "inline"; startpoint.style.display = "none"; buttonText.innerHTML = "Show Less"; } } .pink { color: #FF7B5F; } #more { display: none; } #moreButton { background-color: transparent; border-color: transparent; } <span id="startpoint"></span> <span id="more"> <div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3"> <a href="#"> <figure class="filter-container"> <img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo"> <figcaption class="product-desc"><P>text</P></figcaption> <figcaption class="product-desc2"><h4>text</h4></figcaption> </figure> </a> </div> </span> <button onclick="toggleText()" id="moreButton"> <p class="pink">Show More</p> <img class="more" src="./images/downarrow" alt="arrow"> </button>Porque anulas la etiqueta p en el botón. Use este selector var buttonText = document.querySelector("#moreButton p"); Como eso:
function toggleText() { var showMoreText = document.getElementById("more"); var buttonText = document.querySelector("#moreButton p"); if (startpoint.style.display === "none") { showMoreText.style.display = "none"; startpoint.style.display = "inline"; buttonText.innerHTML = "Show More"; buttonText.classList.remove('green') } else { showMoreText.style.display = "inline"; startpoint.style.display = "none"; buttonText.innerHTML = "Show Less"; buttonText.classList.add('green') } } .pink { color: #FF7B5F; } #more { display: none; } #moreButton { background-color: transparent; border-color: transparent; } .green { color: green; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <span id="startpoint"></span> <span id="more"> <div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3"> <a href="#"> <figure class="filter-container"> <img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo"> <figcaption class="product-desc"><P>text</P></figcaption> <figcaption class="product-desc2"><h4>text</h4></figcaption> </figure> </a> </div> </span> <button onclick="toggleText()" id="moreButton"> <p class="pink">Show More</p> <img class="more" src="./images/downarrow" alt="arrow"> </button>Por favor pruebalo. el código no es correcto. Has mantenido la inmersión dentro del lapso.
function toggleText() { var showMoreText = document.getElementById("more"); var buttonText = document.getElementById("moreButton"); var arrowBtn = document.getElementById("arrowButton"); if (startpoint.style.display === "none") { showMoreText.style.display = "none"; startpoint.style.display = "inline"; buttonText.innerHTML = "Show More"; arrowBtn.style.display = "inline"; } else { showMoreText.style.display = "inline"; arrowBtn.style.display = "none"; startpoint.style.display = "none"; buttonText.innerHTML = "Show Less"; } } .pink { color: #FF7B5F; } #more { display: none; } #moreButton { background-color: transparent; border-color: transparent; cursor: pointer } <span id="startpoint"></span> <span id="more"> <div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3"> <a href="#"> <figure class="filter-container"> <img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo"> <figcaption class="product-desc"><P>text</P></figcaption> <figcaption class="product-desc2"><h4>text</h4></figcaption> </figure> </a> </div> </span> <button onclick="toggleText()"> <span class="pink" id="moreButton">Show More</span> <img class="more" src="./images/downarrow" alt="arrow" id="arrowButton"> </button>