I want to change the bootstrap icon bi bi-caret-right-fill
to bi bi-caret-down-fill
.
<i onclick="myFunction(this)" ></i>
function myFunction(x) {
x.classList.toggle("bi bi-arrow-down-circle");
}
CodePudding user response:
In your case you need to do like this
Hope this will help you
function myFunction(x) {
x.classList.toggle("bi-caret-right-fill");
x.classList.toggle("bi-arrow-down-circle");
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<i onclick="myFunction(this)" ></i>
CodePudding user response:
Try this:
<i onclick="myFunction(this)" ></i>
function myFunction(x) {
if (x.classList.contains("bi bi-caret-right-fill")) {
x.classList.remove("bi bi-caret-right-fill");
x.classList.add("bi bi-arrow-down-circle");
} else if (x.classList.contains("bi bi-arrow-down-circle")) {
x.classList.add("bi bi-caret-right-fill");
x.classList.remove("bi bi-arrow-down-circle");
}
}