Why show button is changing style each time i click it-CodePudding

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 >
      <a href="#">
        <figure >
          <img  src="./images/filter/logo" alt="Logo">
          <figcaption ><P>text</P></figcaption>
          <figcaption ><h4>text</h4></figcaption>
        </figure>
      </a>
    </div>
  </span>
<button onclick="toggleText()" id="moreButton">
    <p >Show More</p> 
    <img  src="./images/downarrow" alt="arrow">
  </button>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<span id="startpoint"></span> 
<span id="more">
    <div >
      <a href="#">
        <figure >
          <img  src="./images/filter/logo" alt="Logo">
          <figcaption ><P>text</P></figcaption>
          <figcaption ><h4>text</h4></figcaption>
        </figure>
      </a>
    </div>
  </span>
<button onclick="toggleText()" id="moreButton">
    <p >Show More</p> 
    <img  src="./images/downarrow" alt="arrow">
  </button>

CodePudding user response：

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 >
      <a href="#">
        <figure >
          <img  src="./images/filter/logo" alt="Logo">
          <figcaption ><P>text</P></figcaption>
          <figcaption ><h4>text</h4></figcaption>
        </figure>
      </a>
    </div>
  </span>
<button onclick="toggleText()">
    <span  id="moreButton">Show More</span> 
    <img  src="./images/downarrow" alt="arrow" id="arrowButton">
  </button>