如何在按钮上的 show/hide 文本旁边显示图标？

Question

我想在单击 less/more 后在 "more" 和 "less" 旁边显示一个图标。

如何制作多个这样的 buttons/id？基于检查的解决方案。 –

function showme(id) {
  var divid = document.getElementById(id);
  var clicky = document.getElementById("clicky");
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
    clicky.innerHTML = "MORE";
  } else {
    divid.style.display = 'block';
    clicky.innerHTML = "LESS";
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <i>Click on more. I want to have two different icons one for more one for less always after click.</i><br>

  <div class="tp-caption rev-btn rev-hiddenicon  rs-hover-ready rev-mre-btn" onclick="showme('widget');" href="javascript:;" id="clicky">MORE <i class="fa fa-car"></i></div>


  <div id="widget" style="display:none;">
    This is a widget
  </div>


</body>

</html>

Answer 1

function showme(id) {
  var car = document.createElement('i');
  car.classList.add("fa");
  
  var divid = document.getElementById(id);
  var clicky = document.getElementById("clicky");
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
    clicky.innerHTML = "MORE";
    car.classList.add("fa-arrow-down");
  } else {
    divid.style.display = 'block';
    clicky.innerHTML = "LESS";
    car.classList.add("fa-arrow-up");
  }
  clicky.appendChild(car);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i>Click on more. I want to have two different icons one for more one for less always after click.</i><br>

<div class="tp-caption rev-btn rev-hiddenicon  rs-hover-ready rev-mre-btn" onclick="showme('widget');" href="javascript:;" id="clicky">MORE <i class="fa fa-car"></i></div>


<div id="widget" style="display:none;">
  This is a widget
</div>

Answer 2

请像下面这样更改您的 JS 代码：-

function showme(id) {
  var divid = document.getElementById(id);
  var clicky = document.getElementById("clicky");
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
    clicky.innerHTML = 'MORE <i class="fa fa-car"></i>';
  } else {
    divid.style.display = 'block';
    clicky.innerHTML = 'LESS <i class="fa fa-car"></i>';
  }
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <i>Click on more. I want to have two different icons one for more one for less always after click.</i><br>

  <div class="tp-caption rev-btn rev-hiddenicon  rs-hover-ready rev-mre-btn" onclick="showme('widget');" href="javascript:;" id="clicky">MORE <i class="fa fa-car"></i></div>


  <div id="widget" style="display:none;">
    This is a widget
  </div>
</body>

Answer 3

你可以这样做....

function showme(id) {
  var divid = document.getElementById(id);
  var clicky = document.getElementById("clicky");
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
    clicky.innerHTML = "MORE <i class='fa fa-arrow-down'></i>";
  } else {
    divid.style.display = 'block';
    clicky.innerHTML = "LESS <i class='fa fa-arrow-up'></i>";
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <i>Click on more. I want to have two different icons one for more one for less always after click.</i><br>

  <div class="tp-caption rev-btn rev-hiddenicon  rs-hover-ready rev-mre-btn" onclick="showme('widget');" href="javascript:;" id="clicky">MORE <i class="fa fa-car"></i></div>


  <div id="widget" style="display:none;">
    This is a widget
  </div>


</body>

</html>

如何在按钮上的 show/hide 文本旁边显示图标？

How to display icon next to show/hide text on button?

html

javascript

button

show-hide

iconbutton