Why show button is changing style each time i click it

Question

I'm new to javascript
And I'm attempting to style the "show more" button.
I added a text and a down arrow under it, but when I click it, the show less button "I don't know how to style it" appears with hidden content, then when I click it again, the show more button appears with no icon or style.

 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>

Answer 1

Because you overriding the p tag iner the button. Use this selector var buttonText = document.querySelector("#moreButton p"); Like that:

 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>

Answer 2

Please try it. code is not proper. You have kept dive within the span.

 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>