why show button is changing style each time i click it

January 24, 2022

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>

>Solution :

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>