Add Font Awesome icons to a button and change them on click-CodePudding

How can I add two icons, top and bottom, so that when the button is clicked, the icon changes (like changing the accordion icon)?

function toggle_div_fun(id) { 
  var divelement = document.getElementById(id); 

  if (divelement.style.display == 'flex') divelement.style.display = 'none'; 
  else divelement.style.display = 'flex';
}

<button  onclick="toggle_div_fun('sectiontohide');">Click here</button>
<div id="sectiontohide">This is the div to hide</div>

CodePudding user response：

Here is a working demo of what you probably want:

let btn = document.getElementById("toggle");

btn.addEventListener('click', function(){
    if(btn.firstChild.classList.contains("fa-up-long")){
      btn.innerHTML = '<i ></i> Click me!';
    } else {
      btn.innerHTML = '<i ></i> Click me!';
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>

<button id="toggle"><i ></i> Click me!</button>

CodePudding user response：

Toggling Icons

This is a general solution for toggling button icons. The buttons are entirely configured in markup. You can have any number of toggle buttons on the page and each can have any number of icons assigned. The code rotates an active class through the list of icons, but otherwise avoids modifying the buttons.

The first step is to create a css rule that hides inactive icons:

.icon-button :not(.active) {
  display:none;
}

Then we add some JavaScript that can be called by a click handler or other event. The code simply moves the active class to the next icon. Yet, if there isn't a next icon then it recycles to the first icon in the list.

  function toggleIcons() {

    // get the next icon in the list
    let next = button.querySelector('.fa-solid.active ~ .fa-solid');

    // else use the first icon 
    if (!next) next = button.querySelector('.fa-solid:first-child');

    // hide the active icon
    button.querySelectorAll('.fa-solid.active')
      .forEach(icon => icon.classList.remove('active'));

    // and show the next one
    if (next) next.classList.add('active'); 
  }

Snippet

The code is written for font-awesome icons, but could easily be modify to work with other icon sets like Bootstrap Icons. As can be seen in the markup, you can preset which icon displays first by adding the active class to it.

// assume DOMContentLoaded

document.querySelectorAll('.icon-button').forEach(button => {

  button.addEventListener('click', function() {
    let next = button.querySelector('.fa-solid.active ~ .fa-solid');
    if (!next) next = button.querySelector('.fa-solid:first-child');
    button.querySelectorAll('.fa-solid.active')
      .forEach(icon => icon.classList.remove('active'));
    if (next) next.classList.add('active');
  })

});

body {
   font-family: sans-serif;
}
.icon-button {
  cursor: default;
}
.icon-button :not(.active) {
  display:none;
}

<button >
  <i ></i>
  <i ></i>
  <i  style="color:red;"></i>
  Player
</button>

<button >
  <i ></i>
  <i ></i>
  <i ></i>
  Draw
</button>

<div  style="display:inline-block;margin-left:2rem;">
  <i  style="color:red"></i>
  <i  style="color:green"></i>
  Toggle 
</div>

<div  style="display:inline-block;margin-left:2rem;">
  <i  style="color:red"></i>
  <i  style="color:green"></i>
  Toggle 
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>