切换为SVG时的HTML按钮内容

我有以下按钮：

<button type="button" class="btn btn-custom rounded-0 d-flex align-items-end" href="#incendios" data-bs-toggle="collapse" data-bs-target="#incendios" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-arrows-expand" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z" />
</svg>
<span class="visually-hidden"></span>
</button>

<button type="button" class="btn btn-custom rounded-0 d-flex align-items-end" href="#incendios" data-bs-toggle="collapse" data-bs-target="#incendios" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-arrows-collapse" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z" />
</svg>
<span class="visually-hidden"></span>
</button>

单击后，我需要将按钮的内容更改为不同的SVG:

<button type="button" class="btn btn-custom rounded-0 d-flex align-items-end" href="#incendios" data-bs-toggle="collapse" data-bs-target="#incendios" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-arrows-expand" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z" />
</svg>
<span class="visually-hidden"></span>
</button>

<button type="button" class="btn btn-custom rounded-0 d-flex align-items-end" href="#incendios" data-bs-toggle="collapse" data-bs-target="#incendios" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-arrows-collapse" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z" />
</svg>
<span class="visually-hidden"></span>
</button>

我应该如何使用JQ解决此问题？

---

提前感谢您的帮助。

这是许多可能性之一

使用两个类（

.show

，

.hide

）并切换它们：

$(document).on('click', 'button', function(){
  $('svg').toggleClass('show hide');
});

$（文档）。在（'click'，'button'，function（）上{
$（this.find（'svg'）.toggleClass（'show hide'）；
});
.show{
显示：块；
}
.隐藏{
显示：无；
}

您确定要为此使用jq吗？你是说jQuery吗？这两个工具完全不同。谢谢你。。。它起作用了。。。但现在我有一个不同的问题。我的页面上有几个这样的按钮，当我点击其中一个时，所有的按钮都会改变。你能建议我用show2，hide2，show3，hide3在css上多画几行吗？或者用不同的方法来避免重复？毕竟，我不能在同一页上用几个按钮来实现这一点。请参阅更新的答案。修改为包含多个按钮。我刚刚意识到我有一个新问题，每当我展开一个按钮时，我希望相同视图中的其他按钮被展开以压缩。例如，在开始时，所有按钮都是压缩的，我想单击其中一个按钮，它将变为展开的，如果我单击其他按钮之一，上一个按钮将压缩，新按钮将展开，依此类推。。。