如何将自定义图标添加到我的少显示按钮

Question

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 = "table-cell";
    buttonText.innerHTML = "Show More";    
    buttonText.classList.remove('less')
  } else {
    showMoreText.style.display = "table-cell";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
    buttonText.classList.add('less')
  }
}

 .pink{
    color: #FF7B5F;
  }

  #more {
    display: none;
}

  #moreButton{
    background-color:transparent;
    border-color: transparent; 
   }


   .less{
       color: #FF7B5F;
   }
   
   .more{max-width:20px;
   
   }

 <div id="startpoint"></div>
          <div id="more">
          <div class="row">
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/RIZEK.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Sabahoo.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Securite.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/SIP.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Spectar.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/stake.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Standard Chartered.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Step.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Switzgroup.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Tarjama.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/WTTC.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Z&V.jpg" alt="">
            </div>
          </div>
        </div>
        <button onclick="toggleText()" id="moreButton">
         <p class="pink">Show More</p> 
         <img class="more" src="https://e7.pngegg.com/pngimages/325/32/png-clipart-arrow-down-android-down-arrow-hand-desktop-wallpaper-thumbnail.png" alt="">
        </button>
        </div>

我最近一直在努力使用 java 脚本，因为我是一个新手开发人员，但我最终通过创建一个功能性的 java 脚本让它工作起来显示更多显示更少显示自定义按钮显示更多的向下箭头标志，但我不知道如何使用向上箭头显示更少，这很烦人。任何帮助将不胜感激。

Answer 1

希望对您有所帮助：

Select 你的图标

var moreIcon = document.querySelector("#moreButton img");

在图标中切换 less class。

moreIcon.classList.add('less');
moreIcon.classList.remove('less');

添加lessclass时，使用CSS旋转图标

img.more.less {
  transform: rotate(180deg);
}

function toggleText() {
  var showMoreText = document.getElementById("more");  
  var buttonText = document.querySelector("#moreButton p");
  var moreIcon = document.querySelector("#moreButton img");
  
  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "table-cell";
    buttonText.innerHTML = "Show More";    
    buttonText.classList.remove('less');
    moreIcon.classList.remove('less');
  } else {
    showMoreText.style.display = "table-cell";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
    buttonText.classList.add('less');
    moreIcon.classList.add('less');
  }
}

.pink{
    color: #FF7B5F;
  }

  #more {
    display: none;
}

  #moreButton{
    background-color:transparent;
    border-color: transparent; 
   }


   .less{
       color: #FF7B5F;
   }
   
   .more{max-width:20px;
   
   }
   
   img.more.less {
     transform: rotate(180deg);
   }

<div id="startpoint"></div>
          <div id="more">
          <div class="row">
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/RIZEK.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Sabahoo.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Securite.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/SIP.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Spectar.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/stake.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Standard Chartered.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Step.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Switzgroup.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Tarjama.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/WTTC.jpg" alt="">
            </div>
            <div class="col-6 col-md-3 col-lg-2">
              <img class="img-fluid" width="250" src="./images/clients/Z&V.jpg" alt="">
            </div>
          </div>
        </div>
        <button onclick="toggleText()" id="moreButton">
         <p class="pink">Show More</p> 
         <img class="more" src="https://e7.pngegg.com/pngimages/325/32/png-clipart-arrow-down-android-down-arrow-hand-desktop-wallpaper-thumbnail.png" alt="">
        </button>
        </div>

如何将自定义图标添加到我的少显示按钮

how to a custom icon to my show less button

javascript

css

button