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

Question

I want to display an icon next to "more" and "less" after clicking the less/more.

How to make multiple buttons/id's like this? Basing on checked solution. –

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>

shrys · Answer 1 · 2019-07-12T11:03:07.127

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>

But how to make display two different icons? For example more (arrow down) and less (arrow up)? — SurfyHarbor, Jul 12 '19 at 11:01

score 1 · Accepted Answer · answered Jul 12 '19 at 11:00

Please change your JS code like below:-

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>

score 1 · Answer 3 · answered Jul 12 '19 at 11:00

You can do something like this....

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>

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

3 Answers3