1

Looking for a javascript solution to removing a class from multiple buttons.

I'm trying to manage button state, so that when a button is clicked, the clicked buttons state is set to active, and the other buttons reset state.

Thus far I've got the follow, which adds the active state to the clicked button, but does not reset state (remove the active class) of the other buttons.

main.js

function handleButtonState(context) {
    // Remove "active" class from all buttons

    // Add "active" class to clicked button
    context.classList.add("active");
}

index.html

<div id="filter_list" class="btn-group btn-group-lg btn-block" role="group">
      <button type="button" class="btn btn-outline-success btn-block filter_list_button" onclick="handleButtonState(this)">Rock</button>
      <button type="button" class="btn btn-outline-success btn-block filter_list_button" onclick="handleButtonState(this)">Folk</button>
      <button type="button" class="btn btn-outline-success btn-block filter_list_button" onclick="handleButtonState(this)">Jazz</button>
    </div>
</div>
jsldnppl
  • 915
  • 1
  • 9
  • 28

0 Answers0