I'm using bootstrap 4 to create a button with a dropdown menu. The functionality I need is that the button when closed contains the word open and a fontawesome icon beside it. When opened it should say close with an icon beside it.
I'm currently trying this
function toggle() {
const btn = document.body.querySelector("#dropdownMenu2");
if (btn.innerText == "Open") {
btn.innerHTML = "<i class='fa fa-plus-circle' aria-hidden='true'></i>" + "Open";
} else {
btn.innerHTML = "<i class='fa fa-minus-circle' aria-hidden='true'></i>" + "Close";
}
}.dropdown-toggle {
border-radius: 0;
border-style: solid;
border-color: #9d2235;
background-color: #9d2235;
color: #fff;
padding: 8px 20px;
}<button class="dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="toggle()">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
Actions
</button>The button changes to close on the first click but never changes back to open when clicked again.
instead of trying to alter the dom.
Why dont you just add a second button with exact details and then just add same class on both the buttons and use jquery(since bootstrap 4 uses jquery) to hide and display other like following
$('.buttonClass').toggle();